---

前言

最近在写demo练手，记录一下自己在项目中对axios的使用，如有不恰当的地方欢迎指正；
在使用axios之前，可以先进官网先浏览一下官网文档哦~ 附 axios中文官网地址 ：axios

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、Axios是什么？

Axios 是一个基于 promise 的 HTTP 库。 个人简单理解就是 ： 和后台进行交互，获取数据；

二、使用步骤

1.引入axios

代码如下（示例）：

 npm install axios -S 或者 yarn add axios -S

2.axios的初步封装

1. 首先在项目中新建request.js文件用于对axios进行初步的封装；

        在文件中写入以下代码：

import axios from "axios"

const service = axios.create({
  baseURL:'', //服务器地址,一般会按照生产,开发环境进行不同的配置
  timeout: 5000  //请求超时前的毫秒数; 如超过规定的毫秒数请求会被终止
})

// 设置请求拦截器 :
    
service.interceptors.request.use(
  (config) => {
  
    // 一般会在这里对请求头进行一些设置 ; 可以根据自己项目的需求进行设置

    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

// 设置 响应拦截器 :
service.interceptors.response.use(
  // 响应成功
  (response) => {
    // 请求响应成功设置
  },
  // 响应失败
  (error) => {
   // 请求响应失败的设置
    return Promise.reject(error)
  }
)

export default axios

        

附自己写的demo的完整request.js代码: 

import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import { hasToken } from '@/utils/auth.js'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 6000
})

service.interceptors.request.use(
  (config) => {
    if (store.getters.token) {
      config.headers.Authorization = store.getters.token
      if (hasToken()) {
        store.dispatch('user/logout')
        return Promise.reject(new Error('token 失效'))
      }
    }

    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

// 设置响应拦截器
service.interceptors.response.use(
  // 响应成功
  (response) => {
    const { data, message, success } = response.data
    if (success) {
      return data
    } else {
      Message({
        showClose: true,
        message: message,
        type: 'error'
      })
    }
  },
  // 响应失败
  (error) => {
    if (
      error.response &&
      error.response.data &&
      error.response.data.code === 401
    ) {
      store.dispatch('user/logout')
    }
    Message({
      showClose: true,
      message: error.message,
      type: 'error'
    })
    return Promise.reject(error)
  }
)

export default service

3.对axios请求的封装:

        1.同样新建文件api.js,引入刚刚封装好的request.js;

        代码如下 :

import request from '@/utils/request.js'

/**
 *  写法一 : 比较具体
 */
export const loginAPI = (data) => {
  return request({
    url: '接口地址',
    method: '请求方式',
    data
  })
}


/**
 *  写法二 : 复用性高一些
 */
export const getAPI = (url, data) => {
  return request({
    url: url,
    method: 'get',
    params: data
  })
}

export const putAPI = (url, data) => {
  return request({
    url: url,
    method: 'put',
    data: data
  })
}

export const postAPI = (url, data) => {
  return request({
    url: url,
    method: 'post',
    data: data
  })
}

4.使用:

直接在需要使用的地方导入即可

import { getAPI, postAPI } from '@/apis/api.js'

总结

简单的记录了一下平时对axios的用法及封装,  如有不恰当的地方,欢迎指正;