Apakah kegunaan vue encapsulating axios?

Vue encapsulating axios boleh meningkatkan kualiti kod dan menjadikan penggunaan lebih mudah. API axios sangat mesra, dan pembangun boleh menggunakannya secara langsung dalam projek bagaimanapun, apabila skala projek meningkat, setiap kali permintaan HTTP dimulakan, perlu menulis operasi seperti menetapkan tamat masa, menetapkan pengepala permintaan, pengendalian ralat, dsb. Kerja berulang seperti ini bukan sahaja membuang masa, tetapi juga menjadikan kod berlebihan dan sukar untuk dikekalkan untuk meningkatkan kualiti kod kami, kami harus merangkum aksios dua kali dalam projek sebelum menggunakannya, yang boleh menjadikannya lebih mudah untuk digunakan; guna.

Persekitaran pengendalian tutorial ini: sistem windows7, versi vue3, komputer DELL G3.

Apakah axios

axios ialah klien HTTP ringan

berdasarkan perkhidmatan XMLHttpRequest untuk melaksanakan permintaan HTTP konfigurasi kaya, menyokong Promise, menyokong bahagian penyemak imbas dan bahagian Node.js. Sejak Vue2.0, Youda mengumumkan bahawa ia akan membatalkan pengesyoran rasmi vue-resource dan sebaliknya mengesyorkan axios. Kini axios telah menjadi pilihan pertama untuk kebanyakan pembangun Vue

Mengapa merangkum

API axios sangat mesra dan anda boleh menggunakannya terus dalam projek anda dengan mudah.

Walau bagaimanapun, apabila skala projek meningkat, setiap kali permintaan HTTP dimulakan, adalah perlu untuk menetapkan tamat masa, menetapkan pengepala permintaan, menentukan alamat permintaan untuk digunakan berdasarkan persekitaran projek, ralat pengendalian, dsb. Perlu menulisnya semula

Pertindihan usaha sebegini bukan sahaja membuang masa, tetapi juga menjadikan kod berlebihan dan sukar untuk dikekalkan. Untuk meningkatkan kualiti kod kami, kami harus merangkumkan aksios dua kali dalam projek dan kemudian menggunakan

Contohnya:

axios('http://localhost:3000/data', {
  // 配置代码
  method: 'GET',
  timeout: 1000,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json',
    Authorization: 'xxx',
  },
  transformRequest: [function (data, headers) {
    return data;
  }],
  // 其他请求配置...}).then((data) => {
  // todo: 真正业务逻辑代码
  console.log(data);}, (err) => {
  // 错误处理代码  
  if (err.response.status === 401) {
  // handle authorization error
  }
  if (err.response.status === 403) {
  // handle server forbidden error
  }
  // 其他错误处理.....
  console.log(err);});

Jika setiap halaman menghantar permintaan yang serupa, semua Menulis a. sekumpulan konfigurasi dan pengendalian ralat terlalu menyusahkan

Pada masa ini kita perlu merangkum semula aksios untuk menjadikannya lebih mudah digunakan

Cara Apabila merangkum

, anda perlu merundingkan beberapa perjanjian dengan bahagian belakang, seperti pengepala permintaan, kod status, tamat masa permintaan...

tetapan Awalan permintaan antara muka: Bergantung pada pembangunan, ujian, dan persekitaran pengeluaran, awalan perlu dibezakan

Pengepala permintaan: Untuk melaksanakan beberapa perkhidmatan tertentu, beberapa parameter mesti dibawa sebelum permintaan boleh dibuat (contohnya: perniagaan keahlian)

Kod status: Mengikut status berbeza yang dikembalikan oleh antara muka, perkhidmatan yang berbeza dilaksanakan ini perlu dipersetujui dengan bahagian belakang

Kaedah permintaan: Pengkapsulan semula berdasarkan kaedah dapatkan, pos dan lain-lain. lebih mudah digunakan. Untuk kemudahan

pemintas permintaan: tentukan permintaan yang boleh diakses mengikut tetapan pengepala permintaan

pemintas respons: Blok ini berdasarkan kod status yang dikembalikan oleh bahagian belakang ` untuk menentukan pelaksanaan Perniagaan yang berbeza

Tetapkan awalan permintaan antara muka

Gunakan pembolehubah persekitaran nod untuk membuat pertimbangan untuk membezakan antara persekitaran pembangunan, ujian dan pengeluaran

if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = 'http://dev.xxx.com'
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'http://prod.xxx.com'
}

Apabila menyahpepijat secara setempat, anda juga perlu mengkonfigurasi devServer dalam fail vue.config.js untuk melaksanakan pemajuan proksi bagi mencapai domain silang

devServer: {
    proxy: {
      '/proxyApi': {
        target: 'http://dev.xxx.com',
        changeOrigin: true,
        pathRewrite: {
          '/proxyApi': ''
        }
      }
    }
  }

Tetapkan pengepala permintaan dan tamat masa

Dalam kebanyakan kes, pengepala permintaan ditetapkan Hanya dalam beberapa kes, beberapa pengepala permintaan khas diperlukan Di sini, pengepala permintaan universal digunakan sebagai konfigurasi asas. Apabila pengepala permintaan khas diperlukan, lalukan pengepala permintaan khas sebagai parameter dan tulis ganti konfigurasi asas

const service = axios.create({
    ...
    timeout: 30000,  // 请求 30s 超时
	  headers: {
        get: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
          // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
        },
        post: {
          'Content-Type': 'application/json;charset=utf-8'
          // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
        }
  },
})

Enkapsulasi kaedah permintaan

Perkenalkan kaedah terkapsul pertama, Bungkus semula antara muka yang akan dipanggil ke dalam kaedah dan dedahkannya

// get 请求
export function httpGet({
  url,
  params = {}
}) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params
    }).then((res) => {
      resolve(res.data)
    }).catch(err => {
      reject(err)
    })
  })
}

// post
// post请求
export function httpPost({
  url,
  data = {},
  params = {}
}) {
  return new Promise((resolve, reject) => {
    axios({
      url,
      method: 'post',
      transformRequest: [function (data) {
        let ret = ''
        for (let it in data) {
          ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
      }],
      // 发送的数据
      data,
      // url参数
      params

    }).then(res => {
      resolve(res.data)
    })
  })
}

Letakkan kaedah terkapsul dalam fail api.js

import { httpGet, httpPost } from './http'
export const getorglist = (params = {}) => httpGet({ url: 'apps/api/org/list', params })

Anda boleh memanggilnya terus dalam halaman

// .vue
import { getorglist } from '@/assets/js/api'

getorglist({ id: 200 }).then(res => {
  console.log(res)
})

Dengan cara ini, api boleh diurus secara seragam Pada masa hadapan, penyelenggaraan dan pengubahsuaian hanya perlu dilakukan dalam fail api.js

Pemintas permintaan.

Pemintas permintaan boleh menambah token pada setiap permintaan, dan ia mudah dikekalkan selepas pemprosesan bersatu

// 请求拦截器
axios.interceptors.request.use(
  config => {
    // 每次发送请求之前判断是否存在token
    // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况，此处token一般是用户完成登录后储存到localstorage里的
    token && (config.headers.Authorization = token)
    return config
  },
  error => {
    return Promise.error(error)
  })

Pemintas respons

Pemintas respons Anda boleh melakukan satu lapisan operasi selepas menerima respons, seperti menentukan status log masuk dan kebenaran berdasarkan kod status

// 响应拦截器
axios.interceptors.response.use(response => {
  // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
  // 否则的话抛出错误
  if (response.status === 200) {
    if (response.data.code === 511) {
      // 未授权调取授权接口
    } else if (response.data.code === 510) {
      // 未登录跳转登录页
    } else {
      return Promise.resolve(response)
    }
  } else {
    return Promise.reject(response)
  }
}, error => {
  // 我们可以在这里对异常状态作统一处理
  if (error.response.status) {
    // 处理请求失败的情况
    // 对不同返回码对相应处理
    return Promise.reject(error.response)
  }
})

Ringkasan

Encapsulation sangat bermakna dalam pengaturcaraan Pakej axios yang ringkas membolehkan kami menghargai daya tarikannya

Tiada piawaian mutlak untuk merangkum aksios asalkan pakej anda dapat memenuhi keperluan projek anda dan mudah digunakan , iaitu Penyelesaian pembungkusan yang baik

[Cadangan berkaitan: tutorial video vuejs, pembangunan bahagian hadapan web]

Atas ialah kandungan terperinci Apakah kegunaan vue encapsulating axios?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!