铁雪资源网 Design By www.gsvan.com
痛点:
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 = '/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={}, 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请求,封装
铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无结合axios对项目中的api请求进行封装操作的评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?