项目中封装axios

封装axios

如果接口变化只需要在一个地方更改接口地址 不需要每个接口修改

重写axios

src/utils/http.js

//导入axios  重写aixos  暴露新的axios给接口对应层使用
import axios from 'axios'

// 配置服务器地址
const instance = axios.create({
    baseURL: 'http://8.137.157.16:9002'
})

//拦截器 ：
//请求拦截器:  发送axios请求接口的一瞬间（准备发送的一瞬间，进入请求拦截器， 就是添加令牌）
//响应拦截器：后端 返回了数据成功请求之后的 一瞬间，拿到后端的数据，进行一次处理之后 再返回给页面 res.data.data
instance.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么  config 就是 axios的默认配置这里可以添加token
    // config.headers.Authorization = 登录之后返回的token
    if (localStorage.getItem('user')) {
        // 获取token 拼接到 config
        let { token } = JSON.parse(localStorage.getItem('user'))
        config.headers.Authorization = 'Bearer ' + token
    }
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么  response==={axios数据成功之后的结构体   data requestHeader  }  res.data.data
    return response;
}, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
});

//暴露这个新的对象 instance 其实就是被重写之后的axios 
export default instance;

封装接口函数

src/api/***

import axios from '../utils/http'

// 添加账号
export const postAccountAdd = (data) => {
    return axios.post('/users/add', data)
}
// 账号列表
export const getAccountList = (params) => {
    return axios.get('/users/list', { params })
}