axios的简易封装及使用

axios封装及使用

首先，新建一个vue项目

1.安装 axios

npm install axios;

安装完成后，可以在项目的src路径下的 package.json 文件中看到axios及版本号

2.引入axios

在src路径下新建文件api文件夹，里面存放api相关文件；
在api文件夹里新建dev.js文件，serve.js文件，user.js文件，dev.js是用来配置环境参数（可以放在config文件夹下面），serve.js是用来封装axios，user.js是配置具体的api参数；
dev.js
在dev.js文件中，可以使用node的环境变量来匹配我们的默认的接口url前缀，process.env.NODE_ENV；

可以通过修改env的值，更换环境；或者用条件判断process.env.NODE_ENV，直接赋值 baseURL。

serve.js
首先进行基础配置，创建 axios 实例

const requests  = axios.create( {
    baseURL:apiConfig.mockBaseURL,
  // 基础url,如果是多环境配置这样写，也可以一行的写死
  // baseURL: 'http://10.0.0.0',  //举例
  timeout: 6000 // 请求超时时间
});

配置请求拦截

requests.interceptors.request.use((config) =>{
    console.log(config)
    //判断localStroge中是否有cookie，每次请求都需要在header中携带
    //没有cookie，请求拦截  token也是一样
    const cookies = localStorage.getItem('cookie');
    if(cookies){
        console.log('请求正常')
        config.headers.Cookie = cookies; // 让每个请求携带自定义 cookie / token 请根据实际情况自行修改
        //设置请求头中username
        config.headers.username = 'xxx';
        //其他设置 自定义修改
    }else{
        console.log('请求拦截')
        //拦截处理
    }
    return config
},(error)=>{
    // 对请求错误做些什么
    return Promise.reject(error)
});

配置响应拦截

//响应拦截
requests.interceptors.response.use((response) =>{
    const code = response.data.code;
    if(code){
        //成功
        //与后端沟通，成功code 0
        if(code === '0'){
            return response.data;
         }else if(code === 'xxx'){
            //xxx 与后端沟通，token失效返回的状态码
            //登录失效问题  页面一定时间无操作，退出到登录页面
            Message.closeAll();
            return Message.error({
                message:response.data.msg,
                //其他操作
            })
        } 
        } else{
            //code 异常
            Message.error(`${response.data.msg} 接口异常，未知错误，请稍后再试！`)
            return Promise.reject(response);
        }
    }else{
        if(response.status === 200 || response.status === 201){
            return response.data
        }else{
            return Promise.reject(response)
        }
    }

},(error) => {
    //正常收到服务器端响应，但状态码非 2xx
    if(error.response){
        switch (error.response.status) {
            case 400:
                this.$message.error('请求错误！');
                //其他处理
                break;
            // 401: 未登录 未登录则跳转登录页面              
            case 401:     
            {
                    Message.error('登录失败，请重新登陆！')  
                    this.$router.replace({                        
                        path: '/login',                         
                    });
            }      
                break;
            // 403: 登录被拒绝/ token 过期  跳转至首页
            case 403:     
            {
                    Message.error('访问被拒绝！');
                    //清除 cookie 或 token
                    localStorage.removeItem('cookie');
                    localStorage.removeItem('token');
                    this.$router.replace({
                        path:'/login'
                    }) 
            }      
                break;
            case 404:     
            {
                    Message.error('请求错误，资源不存在！');
                    //其他处理
            }      
                break;
                case 500:     
            {
                    Message.error('服务端异常！');
                    //其他处理 
            }      
                break;
            default:
                //其他错误
                Message.error(`服务繁忙，请稍后再试！${error.response.status}`)
                break;
        }
        return Promise.reject(error.response)
    }else if(error.request){
        //请求发出，未收到服务端响应
        Message.error(error.message)
        return Promise.reject(error.request)
    }else{
        Message.error(error.message);
        return Promise.reject(error.message)
    }
    
});

封装api常用的请求

export const get =(url,params,config = {})=> requests({
    method:'GET',
    url,
    params,
    ...config,
});

export const post = (url,params,config ={}) => requests({
    method:'POST',
    url,
    params,
    ...config
});

export const del = (url,params,config = {}) => requests({
    methods:'DELETE',
    url,
    params,
    ...config
});

常用的请求，可以一句自身需要配置封装。

3.具体使用

在user.js文件中，引入serve.Js文件中封装的请求方法（例如get）

import {get} from 'xxx'

export const  getUserInfo = (p) => get('xxxxx',p)

post,del请求同get
在需要获取该接口的vue文件中引入 getUserInfo 方法，

import { getUserInfo } from "xxx";

...

  mounted() {
    this.init();
  },
  methods: {
    init() {
      //添加loading 加载中效果
      this.loading = true;
      this.getTestTable();
    },
   async getTestTable() {
      try {
        let res = await getUserInfo();
        this.testTable = res.data;
        //去掉加载中 页面显示效果 ——配合element ui的table组件，loading加载
      } catch (error) {
        console.log("error:", error);
      }
    },
  },

接口获取的数据data保存在testTable中，根据实际情况进行挑选展示到页面上~