vue menyepadukan permintaan enkapsulasi axios

Kaedah pembangunan berasaskan komponen Vue menjadikan pembangunan bahagian hadapan kami lebih fleksibel dan cekap, dan dalam proses ini, interaksi data dengan bahagian belakang tidak dapat dielakkan. Axios ialah rangka kerja permintaan data yang baik Ia menyediakan antara muka API yang mudah, mudah digunakan, boleh dipercayai dan mudah dikembangkan, jadi kami memilih untuk menyepadukannya ke dalam projek Vue. Dalam artikel ini, kami akan memperkenalkan cara merangkumkan Axios ke dalam kaedah permintaan praktikal untuk kegunaan mudah dalam komponen Vue.

Pengenalan kepada Axios

Secara umumnya, apabila kami menggunakan Axios untuk menghantar permintaan, ia melibatkan tiga langkah berikut:

1. Buat contoh Axios:

// axios实例的默认配置
const instance = axios.create({
  baseURL: '',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json'
  }
});

2. Hantar permintaan:

instance.get('/api/getUser', {
  params: {
    id: 123
  }
}).then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})

3. Balas keputusan permintaan:

instance.interceptors.response.use(res => {
  if (res.status === 200) {
    return res.data;
  } else {
    throw new Error(res.status);
  }
}, err => {
  throw new Error(err);
})

Penggunaan Axios sangat mudah dan mudah, tetapi jika setiap kali Apabila digunakan dalam komponen Vue, kod ini mesti ditulis berulang kali, yang memakan masa dan terdedah kepada ralat. Oleh itu, kita boleh merangkumnya ke dalam kaedah permintaan umum:

Axios request enkapsulasi

Kita boleh menggunakan Promise, kaedah pengaturcaraan tak segerak, untuk merangkum permintaan Axios ke dalam kaedah umum dan kemudian menyatukannya Memproses hasil yang dikembalikan.

import axios from 'axios';

axios.defaults.baseURL = '';
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.timeout = 5000;

// 请求拦截器
axios.interceptors.request.use(
  config => {
    // 将token添加到请求头中
    if (localStorage.getItem('accessToken')) {
      config.headers.Authorization = localStorage.getItem('accessToken');
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 响应拦截器
axios.interceptors.response.use(
  response => {
    if (response.status === 200) {
      return Promise.resolve(response);
    } else {
      return Promise.reject(response);
    }
  },
  error => {
    if (error.response.status) {
      switch (error.response.status) {
        case 401:
          // token过期，跳转到登录页
          break;
        case 404:
          // 请求资源不存在
          break;
        default:
          // 其他错误提示
          break;
      }
      return Promise.reject(error.response);
    }
  }
)

export default function request(options) {
  return new Promise((resolve, reject) => {
    axios(options).then(res => {
      resolve(res.data);
    }).catch(error => {
      reject(error);
    })
  })
}

Dalam kod di atas, kami mencipta tika Axios dan menetapkan konfigurasi lalainya, dan juga menambah pemintas permintaan dan tindak balas. Dalam kaedah permintaan terkapsul, kami menggunakan Promise untuk mengembalikan hasil permintaan.

• Dalam pemintas permintaan, kami boleh menambah Token pada pengepala permintaan, dan kami juga boleh menyesuaikan permintaan di sini.
• Dalam pemintas tindak balas, kami boleh melakukan pemprosesan khas pada hasil respons, seperti melompat ke ralat kod status, menggesa bahawa sumber tidak wujud, atau gesaan ralat lain, dsb.

Kaedah permintaan menggunakan

untuk merangkum permintaan Axios ke dalam kaedah biasa Kita boleh menggunakannya dalam komponen Vue, kita hanya perlu menghantar parameter asas permintaan:

import request from '@/utils/request';

export function fetchData() {
  return request({
    url: '/api/list',
    method: 'get'
  })
}

Begitu juga, ia menyokong permintaan untuk kaedah HTTP seperti GET, POST, PUT, DELETE, PATCH, dll. Hanya tentukan kaedah yang berbeza dalam parameter.

request({
  url: '/api/user',
  method: 'post',
  data: {
    username: 'admin',
    password: '123456'
  }
});

request({
  url: '/api/user',
  method: 'put',
  params: {
    id: 123
  },
  data: {
    username: 'admin',
    password: '123456'
  }
});

request({
  url: '/api/user',
  method: 'delete',
  params: {
    id: 123
  }
});

Kesimpulan

Artikel ini menerangkan secara terperinci cara merangkum kaedah permintaan Axios melalui penyepaduan dan enkapsulasi Axios dalam projek Vue. Kaedah enkapsulasi ini dapat mengurangkan jumlah penulisan kod berulang, meningkatkan kecekapan pembangunan, dan juga memudahkan pemprosesan hasil permintaan yang bersatu. Semasa penggunaan, kami boleh melaraskan dan mengembangkan konfigurasi dan pemintasnya mengikut keperluan untuk memenuhi keperluan yang berbeza.

Atas ialah kandungan terperinci vue menyepadukan permintaan enkapsulasi axios. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!