18720358503 在线客服 人才招聘 返回顶部
企业动态 技术分享 行业动态

小程序请求进口在哪_详解axios中封装使用、拦截

2021-01-07分享 "> 对不起,没有下一图集了!">
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)       这篇文章主要介绍了axios中封装使用、拦截特定请求、判断所有请求加载完毕的相关知识,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 Node.js 中使用
vue2.0之后,就不再对 vue-resource 更新,而是推荐使用 axios,本项目也是使用 axios
功能特性
在浏览器中发送 XMLHttpRequests 请求
在 node.js 中发送 http请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换 JSON 数据
客户端支持保护安全免受 CSRF/XSRF(跨站请求伪造) 攻击

封装使用

建议拆分三个文件

src
 - service
 ---- axios.js (axios 配置,拦截器、统一 url)
---- index.js (接口方法,里面调用 api 方法,供页面级调用)
---- api
 ------- index.js(api 方法,里面调用后端提供的接口,供接口方法调用)

axios.js 基本配置

'use strict';
import axios from 'axios';
// 自动识别接口使用开发环境地址(开发环境地址做了 proxyTable 代理,故设置为空)或线上地址
axios.defaults.baseURL = process.env.NODE_ENV === 'production' process.env.API_ROOT : '';
// 开发环境直接打包测试
// axios.defaults.baseURL = '';
axios.interceptors.request.use(config = {
 return config;
}, error = {
 console.log(error);
 return Promise.reject(error);
axios.interceptors.response.use(res = {
 const apiRes = res.data;
 return apiRes;
}, async error = {
 console.dir(error);
 return Promise.reject(error);
export default axios;
api/index.js 调用后端提供的接口
import Ax from '@/service/axios';
import qs from 'qs';
export default {
 fetchBlog (reqData) {
 return Ax.get('/krryblog/blog/getBlog', {params: reqData});
 addBlog (reqData) {
 return Ax.post('/krryblog/blog/addBlog', qs.stringify(reqData));
 updateBlog (reqData) {
 return Ax.post('/krryblog/blog/updateBlog', qs.stringify(reqData));
 deleteBlogCover (id, reqData) {
 return Ax.post(`/krryblog/blog/deleteBlogCover/${id}`, qs.stringify(reqData));
};

index.js 接口方法(调用 api)

import Api from './api';
export async function getBlog(reqData) {
 let res = await Api.fetchBlog(reqData);
 return res;
export async function addBlog (reqData) {
 let res = await Api.addBlog(reqData);
 return res;
export async function updateBlog (reqData) {
 let res = await Api.updateBlog(reqData);
 return res;
export async function deleteBlogCover (id, reqData) {
 let res = await Api.deleteBlogCover(id, reqData);
 return res;
},

页面调用

接下来就可以愉快地在页面调用了

import { getBlog } from '@/service'
export default {
 data() {
 return {
 tableData: [],
 pageIndex: 1,
 pageSize: 9
 created() {
 this.getList();
 methods: {
 async getList() {
 let { result } = await getBlog({
 pageIndex: this.pageIndex,
 pageSize: this.pageSize
 this.tableData = result.data;
}

axios 执行多个并发请求

async getList() {
 let resArr = []
 for (let val of this.arrId) {
 // push 请求
 resArr.push(queryPropertyValue({ id: val }))
 this.tableData = []
 Promise.all(resArr).then(res = {
 for (let val of res) {
 let vals = val.result.propertyValues
 // 每个请求的结果 push 到 tableData
 vals.forEach(item = this.tableData.push(item))
},

或者直接在 axios 写 promise all

// 根据 id 获取某一条商品数据
let getDetail = (id)= {
 return axios.get(`/detail bid=${id}`);
// 检测登录的用户是否将此商品加入购物车
let detectCar = (shopId,userId)= {
 return axios.get(`/detectCar shopId=${shopId} userId=${userId}`);
// 获取一条商品数据、并且检测是否加入购物车
let getDeAll = (shopId,userId)= {
 axios.all([
 getDetail(shopId),
 detectCar(shopId,userId)
 ]).then(axios.spread((resDetail, resCar)= {
 // 两个请求现已完成
 // 打印两个请求的响应值 
 console.log(resDetail);
 console.log(resCar);
 }));
}

实例的方法

axios#request(config)
axios#get(url [,config])
axios#delete(url [,config])
axios#head(url [,config])
axios#post(url [,data [,config]])
axios#put(url [,data [,config]])
axios#patch(url [,data [,config]])

请求配置:只有url是必需的,如果未指定方法,请求将默认为GET

axios 拦截特定请求

业务上经常出现这个问题,需要拦截某些特定请求,在该特定请求,页面采取或不采取什么变化

研究 axios 的 request 统一拦截方法:axios.interceptors.request.use(function (config) {})

参数 config 如下:

可以发现 config.url 就是请求的接口的地址,那么 “/” 最后的 getClassify 就是该请求的方法,就可以通过取出该字符串来判断某些特定请求,从而做出怎样的变化

axios.interceptors.request.use(config = {
 // 判断请求是否是 getClassify,如果是 getClassify,不加载 LoadingBar
 let url = config.url;
 if (url.split('/').pop() === 'getClassify') {
 flag = false;
 } else {
 iView.LoadingBar.start();
 flag = true;
 return config;
}, error = {
 console.log(error);
 return Promise.reject(error);
});

如何判断所有请求加载完毕

let reqNum = 0
axios.interceptors.request.use(function (config) {
 // 在请求发出之前进行一些操作,每次发出请求就 reqNum++
 reqNum++
 _bus.$emit('showloading')
 return config
axios.interceptors.response.use(response = {
 // 接受请求后 reqNum--,判断请求所有请求是否完成
 reqNum--
 if (reqNum = 0) {
 _bus.$emit('closeLoading')
 } else {
 _bus.$emit('showloading')
})

axios 的 post 请求 相关问题

如果遇到 post 请求跨域问题,在 webpack 配置文件可以设置 proxyTable 处理跨域问题
传送门:
post 请求携带参数,需要做一次序列化:qs.stringify(reqData)

saveNormalAds (reqData) {
 return Ax.post('/index.php krry', qs.stringify(reqData));
},

总结

以上所述是小编给大家介绍的详解axios中封装使用、拦截特定请求、判断所有请求加载完毕),希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!


"> 对不起,没有下一图集了!">
在线咨询