アクシオス研究ノート（1）

まず、インスタンスオブジェクトを作成します

さまざまなバックグラウンドリンクにアクセスし、さまざまなインスタンスオブジェクトを使用してリクエストを送信します 

// 创建实例对象
const requestA = axios.create({
    baseURL: '',  // 基础访问路径 http://localhost:3000
    timeout: 10000, // 设置超时时间

})

// 创建实例对象
const requestB = axios.create({
    baseURL: '',  // 基础访问路径 http://b.com
    timeout: 10000, // 设置超时时间

})


//使用 request与axios对象的功能 几乎一样
requestA.get('/post').then(res=>{
    console.log(res)
})

次に、リクエストインターセプターを設定します

リクエストの前処理では、リクエストを送信するための設定を変更できます。トリガーシーケンスは、ファーストイン、ラストアウト、最初に書き込み、次に検証します。

requestA.interceptors.request.use(
    config=>{
        return config
    },
    error=>{
        return Promise.reject(error)
    }
)

構成は、config=>{}で次のように変更できます。

config.timeout = 2000 

config.params = {a：100} ----->リクエストURLは次のようになります：http：// localhost：3000 / post？a = 100

バックグラウンドで検証されたトークンは、通常、この時点でリクエスト構成に追加されます。 

第三に、応答インターセプターを設定します

バックグラウンド応答結果の前処理により、axios（）。then（res => {}）のresデータを簡略化できます。

トリガーシーケンスは、先入れ先出し、先入れ先出し、変更です。

requestA.interceptors.response.use(
    response=>{
        return response
    },
    error=>{
        return Promise.reject(error)
    }
)

4.キャンセルリクエスト

リクエストボタンを複数回クリックします。前のリクエストが完了していない場合は、前のリクエストをキャンセルしてこのリクエストを送信します

// 定义全局变量
let cancel = null

//给按钮添加点击事件
btn.onclick = function(){

    //检测上次请求是否完成
    if(cancel !== null){
        cancel()  // 调用cancel函数，取消上一次请求
    }

    axios.get(
        'http://localhost:3000/posts',
       
        { // 添加配置对象的属性
            cancelToken: new axios.CancelToken(function(c){
                // 将c的值赋值给cancel
                cancel = c
            })
        }
    ).then(res => {
        console.log(res)
        // 请求完成，将cancel初始化
        cancel = null
}