前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >axios(封装使用、拦截特定请求、判断所有请求加载完毕)

axios(封装使用、拦截特定请求、判断所有请求加载完毕)

原创
作者头像
Krry
发布2019-04-09 13:47:34
4.9K0
发布2019-04-09 13:47:34
举报
文章被收录于专栏:KrryblogKrryblog

博客地址:https://ainyi.com/71

  • 基于 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 基本配置

代码语言:txt
复制
'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 调用后端提供的接口

代码语言:txt
复制
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)

代码语言:txt
复制
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;
},

页面调用

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

代码语言:txt
复制
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 执行多个并发请求

代码语言:txt
复制
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

代码语言:txt
复制
// 根据 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);
  }));
}
  • 实例的方法
代码语言:txt
复制
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 就是该请求的方法,就可以通过取出该字符串来判断某些特定请求,从而做出怎样的变化

代码语言:txt
复制
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);
});

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

代码语言:txt
复制
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 处理跨域问题
  • 传送门:https://ainyi.com/27
  • post 请求携带参数,需要做一次序列化:qs.stringify(reqData)
代码语言:txt
复制
saveNormalAds (reqData) {
  return Ax.post('/index.php?krry', qs.stringify(reqData));
},

博客地址:https://ainyi.com/71

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 封装使用
    • axios.js 基本配置
      • api/index.js 调用后端提供的接口
        • index.js 接口方法(调用 api)
          • 页面调用
          • axios 执行多个并发请求
          • axios 拦截特定请求
          • 如何判断所有请求加载完毕
          • axios 的 post 请求 相关问题
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档