vue项目中axios的封装和使用

一、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) })