vue aixos網絡請求的開發封裝_2020aixos封装-优快云博客

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);
  })
}