封装axios

1.什么是axios

    Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

    特点：

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

在项目过程中，会频繁的使用调取接口，为了避免重复代码，快速编写接口，对axios进行封装

进行封装axios-1

//引入axios,qs
import axios from 'axios'
import qs from 'qs'

//设置axios的默认地址
axios.defaults.baseURL = 'http://127.0.0.1:8888'


//进行拦截
axios.interceptors.request.use(function (config) {
   const token =  localStorage.getItem('token')
    // 在发送请求之前做些什么，例如加入token , 添加请求头    
    //除了登录界面，全部带上请求头
    config.headers.Authorization = `Bearer ${token}`   
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

axios.interceptors.response.use(function (response) {
    // 在接收响应做些什么，例如跳转到登录页
    let { code, msg } = response.data;
    //当有code的时候进行消息提示
    if (code != undefined) {
        if (code === 1) {
            //弹出提示，删除成功
            Message({
                message: msg,
                type: "success"
            });
        }
        if (code === 0) {
            Message.error(msg)
        }
    }
    return response;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});


//进行封装axios并暴露
export default {
    get(url, params) {
        return new Promise((resolve, reject) => {
            axios.get(url, { params })
                .then(res => resolve(res.data))
                .catch(err => reject(err))
        })
    },
    post(url, params) {
        return new Promise((resolve, reject) => {
            axios.post(url, qs.stringify(params))
                .then(res => resolve(res.data))
                .catch(err => reject(err))
        })
    },
}

进行封装axios-2

import axios from 'axios'
import qs from 'qs'

//默认地址
axios.defaults.baseURL = 'http://127.0.0.1:3333'

//请求拦截器
axios.interceptors.request.use((req)=>{
    const token = '13';
    if(token){
        //token为后端定义字段
        axios.defaults.token = token
    }

    // 处理post
    if(req.method == 'post'){
        //后端如果是加上了cotent-type字段，则不需要处理
        req.data = qs.stringify(req.data)
    }
    
   //返给后台
    return req
},(err)=>Promise.reject(error));


//响应拦截器
axios.interceptors.response.use((res)=>{
    //对返回状态进行处理
    switch (res.status) {
        case 400:
            break;
        case 500:
            break;
        default:
            break;
    }     
    //返回前端
    return res.data.data
},(err)=>Promise.reject(error));

 

进行接口封装

import request from '@/utils/request.js' //引入封装的axios

//暴露接口

//登录接口
export const loginAccount = params => request.get('/login',params);