axios

最新推荐文章于 2024-10-14 09:15:11 发布

这次又写信给哪位

最新推荐文章于 2024-10-14 09:15:11 发布

阅读量112

点赞数

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

本文链接：https://blog.csdn.net/weixin_44134725/article/details/113777199

版权

vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

一、了解

方式一：传统的Ajax是基于XMLHttpRequest（XHR）

但是由于

配置和调试方式非常混乱；
编码蛋疼

方式二：jQuery-Ajax

相对传统Ajax非常好用，但是

jQuery的代码1w+行，Vue的代码1W+行，为了在Vue中使用ajax，而引入JQuery，得不偿失。

方式三：Vue-resource

官方在Vue1.x推出Vue-Resource插件，它的体积相对于jQuery小很多，并且是官方推出的，但是

在Vue2.x推出后，Vue-Resource已经停止更新，不在维护；
因此，Vue-Resource可能出现不支持新版本，也可能出现各种bug；
对项目的开发和维护都存在很大隐患；

方式四：axios

特点：

在浏览器中发送XMLHttpRequest请求
在node.js中发送http请求
支持Promise API
拦截请求和响应
转换请求和响应数据
等等

支持多种请求方式：

axios（config）
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]]）

二、基本使用

http测试接口：http://httpbin.org/#/HTTP_Methods/get_get

安装：

npm install --save axios

配置使用：

import axios from "axios";



axios({
    url:'http://httpbin.org/get',
    method:'get'
}).then((res)=>{
    console.log(res);
})

三、axios发送并发请求

//axios发送并发请求
axios.all([
    axios({
        url: 'http://httpbin.org/get',
        method: 'get'
    }),
    axios({
        url: 'http://httpbin.org/get',
        method: 'get'
    })])
    .then(results => {
        console.log(results);
    })

请求的结果存放在一个数组中

我们也可以使用axios.spread将数组展开

axios.all([
    axios({
        url: 'http://httpbin.org/get',
        method: 'get'
    }),
    axios({
        url: 'http://httpbin.org/get',
        method: 'get'
    })])
    .then(axios.spread((res1,res2)=>{
        console.log(res1);
        console.log(res2);
    }))

四、axios的配置信息相关

//axios的配置信息相关
axios.defaults.baseURL = 'http://httpbin.org'
axios.defaults.timeout = 5000

axios({
    url:'/get'
}).then(res=>{
    console.log(res);
})

五、axios的实例和模块封装

axios实例

//axios的实例和模块封装
const instance_1 = axios.create({
    baseURL:'http://httpbin.org',
    timeout:5000
})

instance_1({
    url:'/get',
    method:'get'
}).then(res=>{
    console.log(res);
})

模块封装：

src/network中的request.js

import axios from "axios";

export function ins(config){
    const instance = axios.create({
        baseURL:'http://httpbin.org',
        timeout:5000
    })
    //发送网络请求，回调
    return instance(config)
}

调用模块：

import {ins} from './network/request'

ins({
    url:'/get',
    method:'get'
}).then(res=>{
    console.log(res);
})

六、axios拦截器

请求成功拦截、请求失败拦截

    //拦截请求
    instance.interceptors
        .request
        .use(config => {
            console.log('config', config);
            //1、可能config中的一些信息不符合服务器要求1
            /*if(config.method === 'post') {
                config.data = qs.stringify(config.data);
              }*/
            //2、比如在发送网络请求时显示一个请求的动画
            //3、某些网络请求必须携带一些特殊信（比如token）
            return config
        }, error => {
            console.log('error', error);
            return Promise.reject(error)
        })

响应成功拦截

响应失败拦截

    instance.interceptors
        .response
        .use(res => {
            console.log('res', res);
            /*
            * */
            return res.data
        }, error => {
            console.log('error', error);
            return Promise.reject(error)
        })