vue aixos網絡請求的開發封裝

最新推荐文章于 2024-12-31 22:58:55 发布

原创最新推荐文章于 2024-12-31 22:58:55 发布 · 134 阅读

0 ·

CC 4.0 BY-SA版权

vue 同时被 2 个专栏收录

36 篇文章

订阅专栏

29 篇文章

订阅专栏

本文介绍在Vue项目中如何使用Axios进行网络请求的封装，包括基本的请求和响应拦截、并发请求处理及全局配置设定，通过实例演示如何简化API调用流程。

vue-router 以後不再維護了當前比較多使用的是ajax和axios

ajax 是Asynchronous Javascript And XML 異步js 和xml，是一種異步請求的技術

aixos在npm上的描述是Promise based HTTP client for the browser and node.js，是一種基於promise封裝的http客戶端

在network 的文件夾下封裝一個request.js 想要調用接口的時候直接引用request.js

如果接口發生改變那麼只需要在request.js一個地方改就ok啦

要使用axios 首先要進行安裝npm install axios

import Axios from 'axios'

Axios({
   //拿數據的URL
}).then((res) => {
 //拿到返回的數據  
}).catch((err) => {
  //沒有返回數據時做出處理
});

axios 併發請求


Axios.all([Axios({
  url: '',
}), Axios({
  url: '',
  params: {

  }
})
]).then(res => { 

})

axios全局配置

Axios.defaults.baseURL = '';
Axios.defaults.timeout = 3000;
Axios.all([Axios({
  url:'home/goods'
}), Axios({
  url:'home/data',
  params: {
    type: 'sell',
    page:5
  }
})]).then(res => { 
  
})

終極封裝網絡請求方法

import Axios from 'axios'

export function request(config){
  const instance = Axios.create({
    baseURL: '',
    timeout:3000,
  })
  //攔截器
  instance.interceptors.request.use(config => {
    console.log(config);
    return config;
  }, err => {
      console.log(err);
  })
  instance.interceptors.response.use(res => { 
    return res.data;
  }, err => { 
      console.log(err);
  })
}