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