使用Promise、axios封装ajax异步请求

た 入场券 2022-04-11 02:40 577阅读 0赞

先上代码（加载动画用的是Element UI组件）

  1. import axios from "axios"
  2. import Vue from 'vue'
  3. import { Loading } from 'element-ui'
  5. const API_Root = ''
  6. const API_Root_DEV = '/api'
  7. axios.defaults.baseURL = (process.env.NODE_ENV === 'production' ? API_Root : API_Root_DEV)
  8. axios.defaults.headers.Accept = 'application/json'
  9. axios.defaults.timeout = 5000
  11. // 添加请求拦截器
  12. let loadinginstace;
  13. axios.interceptors.request.use(function (config) {
  14.     loadinginstace = Loading.service({ text: '正在加载中' });
  15.     return config
  16.   }, function (error) {
  17.     loadinginstace.close();
  18.     Vue.toast(error, 'error');
  19.     return Promise.reject(error)
  20.   })
  22.   // 添加响应拦截器
  23.   axios.interceptors.response.use(function (response) {
  24.     loadinginstace.close();
  25.     return response
  26.   }, function (error) {
  27.     loadinginstace.close();
  28.     Vue.toast(error, 'error');
  29.     return Promise.reject(error)
  30.   })
  32. let ajaxs = {
  33.      //一般请求
  34.     ajaxCommon (url, data = {}, type = 'GET') {
  35.         return new Promise(function (resolve, reject) {
  36.             let promise;
  37.             if (type === 'GET') {
  38.                 let str = this._paramJoin(data);
  39.                 url = str ? (url + '?' + str) : url;
  40.                 promise = axios.get(url);
  41.             }
  42.             else if (type === 'POST') {
  43.                 promise = axios.post(url, data);
  44.             }
  45.             promise.then(res => resolve(res.data)).catch(err => reject(err));
  46.         })
  47.     },
  48.     //文件
  49.     ajaxFile (url, data = {}, type = 'POST') {
  50.         return new Promise(function (resolve, reject) {
  51.             let promise = axios.post(url, data, {
  52.                 headers: {
  53.                     'content-type': 'multipart/form-data'
  54.                 }
  55.             });
  56.             promise.then(res => resolve(res.data)).catch(err => reject(err));
  57.         })
  58.     },
  59.     _paramJoin (data) {
  60.         let arr = Object.keys(data);
  61.         let str = '';
  62.         arr.forEach(function (item) {
  63.             str += item + '=' + data[item] + '&';
  64.         })
  65.         if(str !== ''){
  66.             str = str.substr(0, str.length-1);
  67.         }
  68.         return str;
  69.     }
  70. }
  72. export default ajaxs

该方法一定要返回promise对象，为什么这么说呢？要牢记promise的出现就是为了解决异步回调的问题，之前为了要请求的结果继续处理事情要一层套一层，也不方便封装，现在只需要把请求的结果“托管”给promise，那我要数据也要从promise那要，所以封装的ajax()要返回promise对象。

发送axios异步请求，返回的也是promise对象，用.then（调用resolve()）和.catch（调用reject()）分别处理正确和错误的返回值，我们最终想要的是data
下图是axios的请求值
axios返回值response

下面是如何调用ajax()得到data值

  • 使用promise的then

    getAddress ({commit}) {

    1. let address;
    2. ajax('urlxxxx').then(data => address = data) //将获取的data值赋给变量
    3. commit(receive_address, {address})

    }

  • 使用ES7的async

    async getAddress ({commit}) {

    1. let address = await ajax('urlxxxx');
    2. commit(receive_address, {address})

    }

如果不对axios的请求值进行处理，那就不用加最外层的new Promise()，直接返回axios.get()的返回值promise对象
之前写过总结的promise和async

发表评论

表情：
评论列表 （有 0 条评论，577人围观）

还没有评论，来说两句吧...

相关阅读

    相关 异步请求-AJAX

    什么是同步交互 > 首先用户向HTTP服务器提交一个处理请求。接着服务器端接收到请求后，按照预先编写好的程序中的业务逻辑进行处理，比如和数据库服务器进行数据信息交换。最后，服

    ゝ一世哀愁。ゝ一世哀愁。/ 0 赞/ 150 阅读

    相关 ajax--异步请求

    何为异步请求？ 当浏览器向服务器发送同步请求时，服务处理同步请求的过程中，浏览器会处于等待的状态，服务器处理完请求把数据响应给浏览器并覆盖浏览器内存中原有的数据，浏览器重

    今天药忘吃喽~今天药忘吃喽~/ 0 赞/ 286 阅读