Pengenalan kepada pengkapsulan Axios dan kaedah biasa dalam Vue

Pengenalan kepada pengkapsulan Axios dan kaedah biasa dalam Vue

Axios ialah perpustakaan HTTP berdasarkan Promise Kelebihannya ialah ia mempunyai kebolehbacaan yang baik, kemudahan penggunaan dan kebolehskalaan. Sebagai rangka kerja bahagian hadapan yang popular, Vue juga menyediakan sokongan penuh untuk Axios. Artikel ini akan memperkenalkan cara merangkum Axios dalam Vue, dan memperkenalkan beberapa kaedah Axios yang biasa digunakan.

1. Pengkapsulan Axios

Semasa proses pembangunan, kita selalunya perlu melakukan beberapa pengkapsulan tersuai Axios, seperti menambah pengepala tetap, memproses pengembalian ralat secara seragam, dsb. Ini menjadikan kod lebih bersih dan lebih mudah diselenggara. Berikut menerangkan cara membungkus Axios.

(1) Konfigurasi permintaan pengekapsulan

Mari kita tentukan dahulu fail config.js untuk pengurusan bersatu konfigurasi permintaan.

import axios from 'axios'

// 创建一个axios的实例
const Axios = axios.create({
  baseURL: '',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
})

// 添加请求拦截
Axios.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    return config
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

// 添加响应拦截器
Axios.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    return response
  },
  error => {
    // 对响应错误做些什么
    return Promise.reject(error)
  }
)

export default Axios

Dalam fail ini, kami mentakrifkan tika Axios dan menambah pemintas permintaan dan pemintas tindak balas. Dengan cara ini, apabila menghantar permintaan, ia akan diproses terlebih dahulu oleh pemintas permintaan, dan apabila bertindak balas, ia juga akan diproses oleh pemintas respons terlebih dahulu.

(2) Kaedah permintaan Enkapsulasi

Tokoh Axios telah ditakrifkan dalam fail config.js, dan kami boleh mencipta kaedah permintaan yang berbeza mengikut keperluan. Sebagai contoh, kita kini perlu menentukan kaedah get.

import Axios from './config'

export function get(url, params = {}) {
  return new Promise((resolve, reject) => {
    Axios.get(url, {
        params: params
      })
      .then(response => {
        resolve(response.data)
      })
      .catch(error => {
        reject(error)
      })
  })
}

Kaedah get di sini menggunakan kaedah get bagi contoh Axios, dan url serta param dihantar semasa permintaan, supaya permintaan GET boleh dihantar. Apabila permintaan berjaya, kami menggunakan Promise untuk menyelesaikan data yang dikembalikan, dan apabila permintaan gagal, kami menolak ralat tersebut.

Begitu juga, kami boleh merangkum pelbagai jenis kaedah permintaan mengikut keperluan.

2. Pengenalan kepada kaedah biasa Axios

Selepas melengkapkan pembungkusan Axios, berikut akan memperkenalkan beberapa kaedah Axios yang biasa digunakan.

(1) GET permintaan

get(url[, config])

url: Url yang diminta, anda boleh menggunakan laluan relatif atau laluan mutlak.

konfigurasi: Konfigurasi yang diminta, termasuk param, pengepala, dsb.

import Axios from './config'

Axios.get('/user?id=1')
  .then(response => {})
  .catch(error => {})

(2) POST permintaan

post(url[, data[, config]])

url: Url yang diminta, anda boleh menggunakan laluan relatif atau laluan mutlak.

data: data yang diminta.

konfigurasi: Konfigurasi yang diminta, termasuk pengepala, dsb.

import Axios from './config'

Axios.post('/user', {
    id: 1,
    name: 'user'
  })
  .then(response => {})
  .catch(error => {})

(3) Permintaan PUT

put(url[, data[, config]])

url: Url yang diminta, anda boleh menggunakan laluan relatif atau laluan mutlak.

data: Data yang diminta.

konfigurasi: Konfigurasi yang diminta, termasuk pengepala, dsb.

import Axios from './config'

Axios.put('/user', {
    id: 1,
    name: 'user'
  })
  .then(response => {})
  .catch(error => {})

(4) PADAM permintaan

padam(url[, konfigurasi])

url: Url yang diminta, anda boleh menggunakan laluan relatif atau laluan mutlak.

konfigurasi: Konfigurasi yang diminta, termasuk pengepala, dsb.

import Axios from './config'

Axios.delete('/user?id=1')
  .then(response => {})
  .catch(error => {})

(5) Minta pemintas

Dalam fail config.js, kami mentakrifkan pemintas permintaan. Anda boleh menggunakan pemintas permintaan untuk melakukan beberapa pemprosesan data tersuai, menambah pengepala permintaan, dsb.

Axios.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    config.headers.Authorization = 'token'
    return config
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

(6) Pemintas tindak balas

Dalam fail config.js, kami mentakrifkan pemintas respons. Anda boleh menggunakan pemintas tindak balas untuk melakukan beberapa pengendalian ralat tersuai, pemprosesan data, dsb.

Axios.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    return response
  },
  error => {
    // 对响应错误做些什么
    if (error.response) {
      // do something
    }
    return Promise.reject(error)
  }
)

3. Ringkasan

Artikel ini memperkenalkan cara merangkum Axios dalam Vue, serta beberapa kaedah Axios yang biasa digunakan. Kelebihan Axios terletak pada kemudahan penggunaan dan kebolehskalaannya, yang boleh membantu kami menghantar permintaan HTTP dengan cepat dan memproses hasil tindak balas semasa pembangunan. Apabila menggunakan Axios, kita harus mencapai pengurusan konfigurasi permintaan bersatu untuk memudahkan penyelenggaraan kemudian. Pada masa yang sama, jenis kaedah permintaan yang berbeza harus dirangkumkan mengikut keperluan untuk memenuhi pelbagai keperluan pembangunan.

Atas ialah kandungan terperinci Pengenalan kepada pengkapsulan Axios dan kaedah biasa dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!