结合axios对项目中的api请求进行封装操作

痛点:

1. 后端对全部请求的url进行了调整。

2.后端要求给所有的请求头部添加一个token, 或者对请求添加其他全局处理。

3.请求代码直接写在每个页面里, 看起来代码臃肿,不够简练,太难管理。

4.看到请求代码, 不明白该请求是干嘛的,语义化不够明显。 ...

上面列举的是一些常见的问题,如果没对api进行封装,当请求比较多的时候,修改起来欲哭无泪,解决这些问题可以进行以下操作

1.对axios进行二次封装

2.对全部api请求也进行封装

如下是对axios 进行二次封装, 文件名是 network/index.js:

import axios from "axios";
import Cookies from "js-cookie";
// 设置超时时间
const myAxios = axios.create({
 timeout: 5000
});

// 跳转登录页面
function nav2Login() {
 location.href = 'http://www.cppcns.com/xxxx/login'
}

// 添加一个请求拦截器
myAxios.interceptors.request.use(
 function(config) {
 // Do something before request is sent

 config.headers["token"] = Cookies.get("token") || "";
 return config;
 },
 function(error) {
 // Do something with request error
 return Promise.reject(error);
 }
);

// 添加一个响应拦截器
myAxios.interceptors.response.use(
 function(response) {
 // Do something with response data
 // 这里只是以200 401为示例, 其他状态码可以根据需要自行添加
 if (response.status === 200) {
  return response.data;
 } else if (response.status === 401) {
  nav2Login() 
  return Promise.reject();
 } else {
  return {
  status: 0,
  message: response.data.message
  };
 }
 },
 function(error) {
 // Do something with response error
 return Promise.reject(error);
 }
);

export default myAxios;

下面是对全部的api进行了封装,文件名是 network/api.js:

import axios from "./index.js";

const API = {
 userList: 'api/user/all', // 用户列表
 cityList: 'api/city/all', // 城市列表
};

function Axios(obj) {
 return axios({
 ...obj
 }).catch(e => {
 // 这里兜住error, 从而不影响后续代码执行,避免出现白屏
 return {
  status: 0,
  message: "网络请求异常"
 };
 });
}

// 给函数命名的时候 尽量语义化
function getUserList(params) {
 return Axios({
 url: API.userList,
 method: "post",
 params
 });
}
function getCityList(params) {
 return Axios({
 url: API.cityList,
 method: "get",
 params
 });
}

export default {
 getUserList,
 getCityList,
}

可以把这些请求挂载在一个全局的变量上, 以Vue为例:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import api from "@/network/api.js";
Vue.prototype.$api = api;

new Vue({
 router,
 render: h => h(App)
}).$mount('#app')

Vue项目中使用方法如下:

this.$api.getUserList(obj).then(res => {
 // 处理res
}).catch(err){
 // 处理 err
}

// 或者使用async await 
async getUserList () {
 try {
  const res = await this.$api.getUserList(obj)
  // 处理res
 } catch (err) {
  // 处理err
 }
}

补充知识:Vue项目中对axios进行封装以及api接口请求

对axios进行封装:

/* 定义一个ajax请求函数,并且其返回值: promise对象(异步返回的数据是: response.data) */
import axios from 'axios';
export default function ajax (url, data=http://www.cppcns.com/wangluo/javascript/{}, type='GET') {
 return new Promise(function (resolve, reject) {
 // 执行异步ajax请求
 let promise
 if (type === 'GET') {
  // 准备url query参数数据,
  let dataStr = ''           //数据拼接字符串
  Object.keys(data).forEach(key => {
  dataStr += key + '=' + data[key] + '&'
  })
  if (dataStr !== '') {
  dataStr = dataStr.substring(0, dataStr.lastIndexOf('&'))
  url = url + '?' + dataStr
  }
  // 发送get请求
  promise = axios.get(url)
 } else {
  // 发送post请求
  promise = axios.post(url, data)
 }
 promise.then(function (response) {
  // 成功了调用resolve()
  resolve(response.data)
 }).catch(function (error) {
  //失败了调用reject()
  reject(error)
 })
 })
}

以上这篇结合axios对项目中的api请求进行封装操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

结合axios对项目中的api请求进行封装操作

扫一扫手机访问