A, axios of features
In the browser transmits a request XMLHttpRequests
Http request transmitted in node.js
Support Promise API
Intercept request and response
Conversion request and response data
Support a variety of ways request:
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]])
Second, common configuration options
Request address
url: '/user',
Request type
method: 'get',
Please root path
baseURL: 'http://www.mt.com/api'
The data processing requests before
transformRequest:[function(data){}],
After the data processing request
transformResponse: [function(data){}],
Custom request header
headers:{'x-Requested-With':'XMLHttpRequest'},
URL query object corresponds to a get request, pass parameters
params:{ id: 12 },
Query object serialization function
paramsSerializer: function(params){ }
request body: corresponds to post requests, a data transfer request
data: { key: 'aa'},
S timeout settings
timeout: 1000,
With or without cross-domain Token
withCredentials: false,
Custom request processing
adapter: function(resolve, reject, config){},
Authentication information
auth: { uname: '', pwd: '12'},
响应的数据格式 json / blob /document /arraybuffer / text / stream
responseType: 'json',
三、axios封装
第一步:安装axios
npm install axios --save
第二步:在main.js中引入
import axios from 'axios'
第三步:在request.js里面封装
方式一:必须传三个参数 回调函数的方法
import axios from 'axios'
export function request(config, success, failure) {
//创建axios实例
const instance = axios.creat({
baseURL: 'http://192.168.14.146:8088',
timeout: 50000
})
//发送真正的网络请求
instance(config.baseconfig)
.then(res => {
// console.log(res) //要回调出去
success(res) //回调
})
.catch(err => {
// console.log(err) //要回调出去
failure(err) //回调
})
}
调用:
import {request} from "./network/request"
//方式一:
request({ //config
url: '',
}, res => { //success
console.log(res)
}, err => { //failure
console.log(err)
})
方式二:只传一个config 回调函数的方法
export function request(config) {
//创建axios实例
const instance = axios.creat({
baseURL: 'http://192.168.14.146:8088',
timeout: 50000
})
//发送真正的网络请求
instance(config.baseconfig)
.then(res => {
// console.log(res) //不能直接在这里处理数据要回调出去
config.success(res) //回调
})
.catch(err => {
// console.log(err) //不能直接在这里处理数据要回调出去
config.failure(err) //回调
})
}
调用:
request({
baseconfig: {
},
success: function(res) {
},
failure: function(err) {
}
})
方式三: Promise方法
export function request(config) {
return new Promise((resolve, reject) => {
//创建axios实例
const instance = axios.creat({
baseURL: 'http://192.168.14.146:8088',
timeout: 50000
})
//发送真正的网络请求
instance(config)
.then(res => {
// console.log(res) //要回调出去
resolve(res) //回调
})
.catch(err => {
// console.log(err) //要回调出去
reject(err) //回调
})
})
}
这样写其实是有点多余,因为axios本身返回的是一个promise(下图源码),所以可以直接return,不用自己包装promise
export function request(config) {
//创建axios实例
const instance = axios.creat({
baseURL: 'http://192.168.14.146:8088',
timeout: 50000
})
//发送真正的网络请求
return instance(config)
//create 的axios返回值本身是一个promise,所以直接return就可以了,不用自己包装promise
}
调用:
//方式三
request({
url: '',
}).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})