シンプルなaxiosリクエストパッケージ

▼序文:

パラメータとデータの違い:
GET要求されたパラメーターはすべてURLサーバー上にありhttp本体のデータは読み取られないため、渡すのはParamsの要求パラメーターです。

サーバーにhttp本文のデータを読み取らせる場合は、POST要求を使用する必要があり、POST要求のパラメーターは本文に格納されます。

使用方法の概要は次のとおりです。
get方法用params,post方法用data。

Promise非同期要求の2つのパラメーター:resolve成功したコールバック関数とreject失敗したコールバック関数

▼ステップバイステップリファレンス
リクエストを取得

let get = function (url, data) {
    
    
  return new Promise((resolve, reject) => {
    
    
    axios.get(url, {
    
    
      params: data
    }).then((res) => {
    
    
      //  请求成功返回后台数据
      resolve(res.data)
    }).catch((error) => {
    
    
      reject(error)
    })
  })
}

リクエスト後

let post = function (url, data) {
    
    
  return new Promise((resolve, reject) => {
    
    
    // qs.stringify()将对象 序列化成URL的形式
    axios.post(url, qs.stringify(data)).then((res) => {
    
    
    //  请求成功返回后台数据
      resolve(res.data)
    }).catch((error) => {
    
    
      reject(error)
    })
  })
}

▼ステップバイステップリファレンス
ポストゲットリクエストで送信できるリクエスト

let request = function (url, method = 'GET', data = {
    
    }) {
    
    
  return new Promise((resolve, reject) => {
    
    
    axios({
    
    
      url: url,
      method: method,
      // post
      data: qs.stringify(data),
      // get
      params: data
    }).then((res) => {
    
    
      // 请求成功返回后台数据
      resolve(res.data)
    }).catch((error) => {
    
    
      reject(error)
    })
  })
}

コンテンツのパッケージ化が完了したら、次のファイルで関数をエクスポートする必要があります。

export {
    
    
  request,
  get,
  post
}

転送
main.jsファイルにグローバル挿入ます。

// 封装axios primary
import axios from 'axios'
import {
    
     api } from './api'
import qs from 'qs'
// 默认的地址
axios.defaults.baseURL = api

この時点で、vueページの上記のapiからエクスポートされたいくつかのネットワークリクエストメソッドを自由に呼び出すことができます!

おすすめ

転載: blog.csdn.net/qq_44469200/article/details/103575647