对axios进行二次封装

关于axios的封装：

在一个项目中会有很多接口，我们为了对这些接口进行方便使用呢，会这些进行一个封装，让我们在用的时候更加简单方便，而且复用性强。

首先我们在src目录下创建utils文件，当然你也可以随便命名，根据自己的命名习惯来

request.js文件放我们的接口设置，比如说总接口呀，环境呀，超时时间呀，拦截器

import router from "@/router";
import axios from "axios";

var run = 'dev';//prd正式环境  dev测试环境
if (run == 'prd') {
    // 正式环境
    var api_url = 'https:。。。。。。';
} else {
    // 测试环境
    var api_url = 'http:。。。。。。。';
}

// 创建axios实例
const service = axios.create({
    baseURL: api_url,
    // 设置超时间
    timeout: 5000,
    // 设置请求头
    headers: {
        "Content-Type": "application/json;charset=utf-8"
    }
})

// 请求拦截
service.interceptors.request.use((config) => {
    config.headers = config.headers || {}
    const token = localStorage.getItem('token')
    if (token) {
        // 这里根据自己项目需求去选择是否配置 Authorization
        // 关于 Authorization 会有文章详细解释
        config.headers['Authorization'] = 'Bearer ' + token || ""
        // config.headers.token = token || ""
    }
    return config
})

// 响应拦截
service.interceptors.response.use((response) => {
  // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据     
  // 否则的话抛出错误
   if (response.status === 200) {
        return Promise.resolve(response);
    } else {
        return Promise.reject(response);
    }
}, (err) => {
     // 服务器状态码不是2开头的的情况
    // 这里可以跟你们的后台开发人员协商好统一的错误状态码    
    // 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
    switch (err.response.status) {
        case 401:
            router.push('/login')
            break;
        case 403:
            alert('请重新登录')
            localStorage.setItem('token', '')
            // router.push('/')
            break;
        case 404:
           
            alert('网址不存在')
            // router.push('/')
            break;

    }
})
export default service

方法1：对get和post这两种请求进行单独封装，在页面直接调用这两个方法

我们在utils文件下创建api.js

import service from "../utils/request";

// 封装post请求
export function post(url, data) {
    return service.post(url, data )
}
// 封装get请求
export function get(url, params) {
    return service.get(url,  params )
}

在页面进行引入

import { get } from "../utils/api";


computed: {  
    get,
  },

let params = { page: 9 };
get("/goods", params).then((res) => {
    if (res.data.code == 1) {
       console.log(res);
}

方法2：

因为我们在响应拦截中让他返回的是promis对象，所以这里要不.then()去拿值

要不就用await拿值。为什么会用async await：

await会将resolve中的结果进行返回，达到了将异步代码使用同步的写法。

如果不会用async await的话可以看一下之前发布的文章。

我在们api.js中对接口进行单独封装

import service from "../utils/request";
// 单独封装接口
export function goods(params) {
    return service({
        url: '/goods',
        method: 'get',
        params
    })
}

在页面中应用

import { goods } from "../utils/api";


computed: {
  goods,
},

// 发送请求 这里返回的是promise对象 我们这里也可以直接goods(params).then
async index() {
  const result = await goods(params);
  if (result.data.code == 1) {
     console.log(result.data.data.data);
  }
}

方法3：

在api.js中对get 和 post 进行封装，然后再引入每个单独的模块中

import service from "../utils/request";

export function get(url,params) {
    return new Promise((resolve, reject) => {
        service({
            url: url,
            method: 'get',
            params
        }).then(res => {
            resolve(res)
        }).catch(err => {
            reject(err);
        })
    })
}

export function post(url, data) {
    return new Promise((resolve, reject) => {
        service({
            url: url,
            method: 'post',
            data
        }).then(res => {
            resolve(res)
        }).catch(err => {
            reject(err);
        })
    })
}

然后再创建一个新的文件夹，根据自己的模块来命名，这个js文件里面就放这个模块的接口，这样写在改接口的时候更加简洁

同样也是在页面引入

import { getGoodsList } from "../utils/goods";

computed: {
    getGoodsList,

},

async index() {
  let params = { page: 9 };
  let res = await getGoodsList(params);
},

当然如果你不想在页面引入的话，我们需要将其挂载到vue的原型上。不适用于方法3。

方法3的话可以再在utile文件中创建一个http.js文件 (可以随便命名)，然后把每个模块再引入进这个js文件中。

在main.js中：

import api from './api' // 导入api接口
Vue.prototype.$api = api; // 将api挂载到vue的原型上复制代码

页面中直接

let res = await this.$api.getGoodsList(params)

无需再引入

这些固定的步骤其实挺好理解的。

对axios进行二次封装

猜你喜欢