正文

vue项目中axios的封装和使用

IP云
IP云V管理员/0 阅读
07/31
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

一、axios的功能特点

在浏览器中发送 XMLHttpRequests 请求
在 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]])

二、常见的配置选项

请求地址
url: '/user',
请求类型
method: 'get',
请根路径
baseURL: 'http://www.mt.com/api',
请求前的数据处理
transformRequest:[function(data){}],
请求后的数据处理
transformResponse: [function(data){}],
自定义的请求头
headers:{'x-Requested-With':'XMLHttpRequest'},
URL查询对象 对应的是get请求，传参数
params:{ id: 12 },
 
查询对象序列化函数
paramsSerializer: function(params){ }
request body：对应的是post请求，传请求数据
data: { key: 'aa'},
超时设置s
timeout: 1000,
跨域是否带Token
withCredentials: false,
自定义请求处理
adapter: function(resolve, reject, config){},
身份验证信息
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)
})