VUEプロジェクトのパッケージとaxiosの使用

機能のA、axios

ブラウザで要求を送信するのXMLHttpRequests

HTTPリクエストはNode.jsの中で送信します

サポートの約束API

インターセプト要求と応答

変換要求と応答データ

方法要求の様々なサポート：

axios（設定）

axios.request（設定）

axios.get（URL [、設定]）

axios.delete（URL [、設定]）

axios.head（URL [、設定]）

axios.post（URL [、データ[設定]]）

axios.put（URL [、データ[設定]]）

axios.patch（URL [、データ[設定]]）

第二に、一般的な構成オプション

要求アドレス

URL： '/ユーザー'

要求タイプ

方法：「取得」、

してくださいルートパス

ベースURL： 'http://www.mt.com/api'

データ処理要求の前に

transformRequest：[関数（データ）{}]、

データ処理要求の後

transformResponse：[関数（データ）{}]、

カスタムリクエストヘッダ

ヘッダー：{ 'X-要求-WITH'： 'のXMLHttpRequest'}、

URL GETリクエストへのクエリオブジェクトの対応、パラメータを渡します

paramsは：{ID：12}、

 

クエリオブジェクトのシリアル化機能

paramsSerializer：関数（paramsは）{}

リクエストボディ：ポストの要求に対応し、データ転送要求

データ：{キー： 'A'}、

Sタイムアウト設定

タイムアウト：1000、

クロスドメイントークンの有無にかかわらず

withCredentials：偽、

カスタム要求処理

アダプター：関数（解決、拒否、設定）{}、

認証情報

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