Vue 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)
}