Vue Axios 基本使用

快速链接

使用axios访问API

axios中文文档|axios中文网

入门

快速使用

用npm安装axios插件

npm install axios --save

在需要使用的地方引入axios

import axios from 'axios'

基础的使用

axios({
    //url
    url: 'http://httpbin.org/',
    //方法, 默认是GET
    methods:'get',
    //如果成功执行的操作
    success:function(){
        // 如果成功的操作
    },
    params: {
        // GET请求的参数
    },
    // 请求根路径
    baseURL: 'http://www.baidu.com/api',
    headers:{
        
    },
    data:{
        // POST请求的参数
    }
})

axios可以使用Promise

axios({
    url:''
}).then(res=>{
    //操作
})

methods也可以用其他方式代替

axios.get({
    //...
})
axios.post({
    //...
})

axios会自动往返回值添加一些东西, 但是从服务器返回的数据都在data里

并发请求

axios.all(axios(), axios()).then()

axios.all方法会返回一个数组, 如果不想这样的话, 可以用axios.spread()方法

axios.all(axios(), axios()).then(axios.spread(res1, res2 => {
    // something
}))

JS特性:

可以用[]括住的变量接收数组, 如:

>const names = ["Jam", "Tom", "Tick"];
>const [name1, name2, name3] = names;

全局变量

可以将在多个请求中都要使用到的变量保存到全局变量中

axios.defaults.baseURL = 'http://xxx.com'
axios.defaults.timeout = 5000

axios封装

如上所用的都是全局的axios, 实际使用时往往会创建对应的axios实例

const instance = axios.create({
    baseURL: 'http://xxx.com',
    timeout: 5000
})

intstance({
    url: '/home',
    page: 1
})

为了代码的封装性和便于之后维护, 最好将axios封装一下

(在/src/network中进行相关网络请求的封装)

• 方法一
• 方法二
• 方法三
• 方法四

// /src/network/requests.js
import axios from 'axios'
export function request(config, success, failure){
    // 创建axios实例
    const instance = axios.create({
        baseURL: 'http://xxx.com',
        timeout: 5000
    })
    
    // 发送请求
    instance(config).then(res=>{
        success(res);
    })
    .catch(err=>{
        failure(err);
    })
}

// 调用时
import request from '....'
request({
    url: ''
},()=>{
    //something
},()=>{
    //something
}
)

其实axios在

// /src/network/requests.js
import axios from 'axios'
export function request(config){
    // 创建axios实例
    const instance = axios.create({
        baseURL: 'http://xxx.com',
        timeout: 5000
    })
    
    // 发送请求
    instance(config.baseparams).then(res=>{
        config.success(res);
    }).catch(res=>{
        config.failure(res);
    })
}

// 调用时
import request from '....'
request({
    baseparams:{
        // something
    },
    success: function(res){
        // something
    },
    success: function(res){
        // something
    }
}
)

可以封装一个Promise, 使得代码更清晰

// /src/network/requests.js
import axios from 'axios'
export function request(config){
      return new Promise((resolve, reject)=>{
        // 创建axios实例
        const instance = axios.create({
          baseURL: 'http://xxx.com',
          timeout: 5000
        })

        // 发送请求
        instance(config.baseparams).then(res=>{
          config.success(res);
        }).catch(res=>{
          config.failure(res);
        })
      })
}

// 调用时
import request from '....'
request(
    {
        url:'xxx'
    }
).then(res=>{
    //xxx
}).catch(res=>{
    //xxx
})

axios本身的返回值就是Promise , 故不需要自己封装

// /src/network/requests.js
import axios from 'axios'
export function request(config){
    // 创建axios实例
    const instance = axios.create({
        baseURL: 'http://xxx.com',
        timeout: 5000
    })
    
    // 发送请求
    return instance(config)
}

// 调用时
import request from '....'
request(
    {
        url:'xxx'
    }
).then(res=>{
    //xxx
}).catch(res=>{
    //xxx
})

axios 拦截器

// /src/network/requests.js
import axios from 'axios'
export function request(config){
    // 1. 创建axios实例
    const instance = axios.create({
        baseURL: 'http://xxx.com',
        timeout: 5000
    })
    // 2. 拦截器
    instance.interceptors.request.use(config=>{
        // 1. 比如检查config一些信息是否符合服务器的要求
        // 2. 比如登录的时候显示一个等待的图标
        // 3. 某些网络请求(比如登录(token)), 必须携带一些特殊的信息
    	return config;
    })
    instance.interceptors.response.use(/*...*/)
    // 3. 发送请求
    return instance(config)
}