axios

安装

npm install axios --save

使用

发送Get请求- 不带参数

import axios from 'axios'

// 发送请求, 默认为get请求
axios({
url: "http://49.232.203.244:8001/v1/link",
}).then(res => {
console.log(res);
})

发送Get- 带查询参数

// get 请求带查询参数
axios({
url: "http://49.232.203.244:8001/v1/post",
params: {
limit: 10,
page: 1
}
}).then(res => console.log(res));

发送post请求

// post 请求
axios({
url: "http://49.232.203.244:8001/v1/auth",
method: "post",
data: {
username: "yan22",
password: "S$V0CLeH_$"
}
}).then(res => console.log(res))

并发请求

// 发送多个请求（并发）
axios.all([
axios({
url: "http://49.232.203.244:8001/v1/link",
}),
axios({
url: "http://49.232.203.244:8001/v1/post",
params: {
limit: 10,
page: 1
}
})
]).then(results => {
console.log(results)
})

响应结构示例

全局配置

// 配置默认 url
axios.defaults.baseURL = "http://49.232.203.244:8001"
// 配置超时时间 5s
axios.defaults.timeout = 5000

axios({
url: "/v1/link" // 最终访问的地址为： baseURL + url
}).then(res => console.log(res))

axios实例

// axios实例, 解决一套项目接口部署到多台服务器上

const instancel = axios.create({
baseURL: "http://49.232.203.244:8001",
timeout: 3000
})

instancel({
url: "/v1/link"
}).then(res => console.log(res))

const instancel9001 = axios.create({
baseURL: "http://49.232.203.244:8000"
})

instancel9001({
url: "/message",
params: {
page: 1
}
}).then(res => console.log(res))

网络请求封装

network/request.js

import axios from 'axios'

export function request(config){
// 创建axios实例
const instance = axios.create({
baseURL: "http://49.232.203.244:8001",
timeout: 5000
})

// 发送真正的网络请求
return instance(config)
}

使用其来发送请求

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

// 使用封装的axios 发送请求
request({
url: "/v1/link",
}).then(res => console.log(res))
.catch(err => console.log(err))

拦截器

import axios from 'axios'

export function request(config){
// 创建axios实例
const instance = axios.create({
baseURL: "http://49.232.203.244:8001",
timeout: 5000
})

// axios 拦截器
instance.interceptors.request.use(config => {
// 请求成功
console.log(config)
// 拦截之后需要把配置返回出去
return config
}, err => {
// 失败
console.log(err)
})

// 响应拦截器
instance.interceptors.response.use(res => {
console.log(res)
// 拿到接口实际返回的内容
return res.data
}, err => {
console.log(err)
})

// 发送真正的网络请求
return instance(config)
}

源码地址

gitee: https://gitee.com/zy7y/hello-fast-api-vue