vue笔记之ajax请求及封装

最新推荐文章于 2024-09-24 15:15:50 发布

[小月]

最新推荐文章于 2024-09-24 15:15:50 发布

阅读量812

点赞数

分类专栏： vue 文章标签： vue js

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

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文探讨了在Vue.js中常用的两种Ajax库——vue-resource和axios。vue-resource作为非官方库，在Vue 1.x中广泛使用，提供get和post等请求方法。而axios是官方推荐的通用ajax请求库，适用于Vue 2.x，其请求方法返回Promise对象，方便错误处理。文章还提及了axios的模块封装技巧。

摘要由CSDN通过智能技术生成

                    
                        
                    
                    常用的ajax库 
vue-resource 
vue插件，非官方库，vue1.x 使用广泛
在线文档
下载：npm install vue-resource --save
理解： 
  使用 vue-resource插件后会给 vue的实例注册一个 $http 的属性
$http 是一个对象提供 get，post 等请求方法，这些请求方法是一个 promise
 
参考代码：// 引入模块
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 
通用的ajax请求库，官方推荐，vue2.x使用广泛
在线文档
安装：npm install axios --save
理解： 
  axios 是一个模块，提供了一些属性和方法。
axios 模块提供如 get 、post 等方法，这些方法是一个promise对象
 
对于失败的响应可以通过功 error.response 获取失败的响应信息。
参考代码// 引入模块
import axios from 'axios'
// 发送 ajax 请求
axios.get(url)
.then(response => {
console.log(response.data) // 得到返回结果数据
})
.catch(error => {
console.log(error.message)
})
 
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);
};

 

                