axios 封装

 

1. 封装axios

src文件夹下新建http文件夹，用来放网络请求相关的文件

2. src/http文件夹下，创建index.js文件，对axios进行封装

/* eslint-disable */
const axios = require('axios');
// import qs from qs
axios.defaults.baseURL = 'http://127.0.0.1:8000';
axios.defaults.timeout = 10000;
axios.defaults.withCredentials = true;
​
'''
    设置请求传递数据的格式（看服务器要求的格式）
    x-www-from-urlencoded
    默认提交表单
    把数据对象序列化成 表单数据
// axios.defaults.headers['Content-Type'] = 'application/x-www-from-urlencoded';
// axios.defaults.transfromRequest = data => qd.stringify(data):
​
​
    设置默认提交  json
    把数据对象序列化成 json 字符串 
'''
axios.defaults.headers['Content-Type'] = 'application/json';
axios.defaults.transformRequest = data => JSON.stringify(data):
    
    
'''
请求拦截器：发送请求前需要调用这个函数
1.当没有登录时，直接跳转到登录页
2.请求发送前把token获取，设置到header中
'''
axios.interceptors.request.use(config => {
    # 从localStorage中获取token
    let token = localStorage.getItem('token');
    # 如果有token，就把token设置到请求头中Aauthorization字段中
    token && （config.headers.Authorization = token）;
    return config
}).error => {
    return Promise.reject(error);
}
​
'''
响应拦截器: 当后端返回数据给vue时会调用这个函数
1.每次返回403错误时，跳转到login
'''
axios.interceptors.response.use(response => {
    # 当响应码是2xx的情况，进入这里
    return response.data
}).error => {
    # 当响应码不是2xx的情况，进入这里
    return error
}
​
'''
get方法，对应get请求
@param {String} url [请求的url地址]
@param {Object} params [请求时携带的参数]
'''
export function get(url, params, headers){
    return new Promise((resolve, reject) => {
        axios.get(url, {params, headers }).then(res => {
            resolve(res.data.ResultObj)
        }).catch(err => {
            reject(err.data)
        })
    })
}
​
​
'''
post方法，对应post请求
@param {String} url [请求的url地址]
@param {Object} params [请求时携带的参数]
'''
export function post(url, params, headers){
    return new Promise((resolve,reject) => {
        axios.post(url, params, headers).then((res) =>{
            resolve(res.data)
        }).catch((err) =>{
            reject(err.data)
        })
    })
}
export default axios;

3. src/http 目录下创建apis.js文件，用来写接口地址列表

'''
eslint-disable
接口信息，生成请求方法
引入get方法，post方法
'''
import { get,post } from './index'
​
//用户登录
export const login = (params,headers) => post("/user/login/",params,headers)