vue笔记之ajax请求及封装

常用的ajax库

vue-resource

1. vue插件，非官方库，vue1.x 使用广泛
2. 在线文档
3. 下载：npm install vue-resource --save
4. 理解：
   • 使用 vue-resource插件后会给 vue的实例注册一个 $http 的属性
   • $http 是一个对象提供 get，post 等请求方法，这些请求方法是一个 promise
5. 参考代码：

   // 引入模块
   import VueResource from 'vue-resource'
   // 使用插件
   Vue.use(VueResource)
   // 通过 vue/组件对象发送 ajax 请求
   this.$http.get('/someUrl').then((response) => {
   // success callback
   console.log(response.data) //返回结果数据
   }, (response) => {
   // error callback
   

axios

1. 通用的ajax请求库，官方推荐，vue2.x使用广泛
2. 在线文档
3. 安装：npm install axios --save
4. 理解：
   • axios 是一个模块，提供了一些属性和方法。
   • axios 模块提供如 get 、post 等方法，这些方法是一个promise对象
5. 对于失败的响应可以通过功 error.response 获取失败的响应信息。
6. 参考代码

   // 引入模块
   import axios from 'axios'
   // 发送 ajax 请求
   axios.get(url)
   .then(response => {
   console.log(response.data) // 得到返回结果数据
   })
   .catch(error => {
   console.log(error.message)
   })
   

7. axios 请求模块封装

   //===== axios封装模块 =====
   import axios from "axios";
   import PubSub from "pubsub-js";
   import qs from "qs";
   
   //----- 创建axios实例 -----
   const axiosInstance = axios.create({
       timeout: 5000,
       headers: {
           "Content-Type": "application/x-www-form-urlencoded",
       },
   
       // 请求数据序列化
       transformRequest: [function (data) {
           return qs.stringify(data);
       }],
   });
   
   //----- 设置请求拦截 -----
   axiosInstance.interceptors.request.use((config) => {
       // 发布消息
       PubSub.publish('loadingShow',true);
       return config;
   }, (err) => {
       // 发布消息
       PubSub.publish('loadingShow',false);
       return Promise.reject(err);
   });
   
   //----- 设置响应拦截 -----
   axiosInstance.interceptors.response.use((response) => {
       // 发布消息
       PubSub.publish('loadingShow',false);
       return Promise.resolve(response.data);
   }, (err) => {
       // 发布消息
       console.log(err.response);
       PubSub.publish('loadingShow',false);
       return Promise.reject(err);
   });
   
   //----- 导出axios模块 -----
   export const request = (config) => {
       // 向axios实例中传入相关配置
       return axiosInstance(config);
   };
   
   

来源：CSDN

作者：[子鱼]

链接：https://blog.csdn.net/weixin_43379230/article/details/104074927