axios的三层封装

147 阅读1分钟

1.首先下载安装

npm install axios || yarn add axios

2.在创建一个文件 utils

import axios from "axios"

//设置默认服务器地址
axios.defaults.baseURL = 'https://api.example.com'

//配置请求拦截器
axios.interceptors.request.use(config => {
    //取出token 鉴权。 token相当于人的身份证 一个角色的信息 权限全部存在这个加密的字符串里面
    let token = window.localStorage.getItem('t_k');
    if (token) {
  //只要有token 所有的接口请求都会携带这个token 发给后台【后台检查token 判断你是否有当前请求的权限】
       // config.headers 请求头  请求头携带token数据 判断权限
       //authorization 字段是和后端商议的【当前项目叫authorization】
        config.headers.authorization = token;
    }
    return config
}, err => {
    return Promise.reject(err)
})
 
//配置响应拦截器
axios.interceptors.response.use(response => {
    return response
}, err => {
    return Promise.reject(err)
})
 
//暴露配置好的axios
export default axios

3.接口管理层

导入这个 
import request from '../utils/request';

//get请求
export const wishList =(params)=>{
    return  request({
        url:'/wish/list',
        method:'get',
        params
    })
}

//post请求
export const cookerList =(data)=>{
    return  request({
        url:'/users/cookerList',
        method:'post',
        data
    })
}

4.接口调用层

//引入对应的用户ajax模块函数
import {wishList,cookerList} from '@/api/文件名'
//发送请求

async getData(){
   let res = await checkLogin({ ...this.formData });
   log(res)
}