オブジェクト指向の思考でvueaxiosをカプセル化する

axiosリクエストの傍受

axios.interceptors.request.use(function(config){
    
    
  console.log(config.url);
  //将路径进行加工，在请求路径前加上请求路径。
  //后端处理跨越方式
  //config.url="http://localhost:8080/demo/"+config.url;
  //前端处理跨越方式
  config.url="/demo/"+config.url;
  //必须返回请求参数，不然请求不到后台。
  return config;
},function(error){
    
    
  console.log(error);
});

axios応答傍受

axios.interceptors.response.use(function(response){
    
    
  console.log(response);
  //对返回值进行简单处理。
  if(response.data=="helloworld"){
    
    
    response.data="worldhello";
  }
  //必须返回响应参数，不然响应值返回不到界面。
  return response;
},function(error){
    
    
  console.log(error);
});

オブジェクト指向の思考でvueaxiosをカプセル化する

1.utilsフォルダーを作成します2.http.jsファイルを作成します
3.入力コード：インポートファイルに注意してください（…/ musicapi /…）

import axios from 'axios'
import qs from 'qs'

//创建axios实例
const instance=axios.create({
    
    //如果我的连接等待时间超过五秒，报异常了
    timeout:5000
});

instance.defaults.baseURL="api";

//错误信息处理
const errorhandler=(status,other)=>{
    
    
    switch(status){
    
    //请求状态编码
        case 404://但凡以4开头的，都是客户端问题
            console.log("您请求的资源不存在");
            break;
        case 500:
            console.log("服务器端出现了问题");
            break;
        default://200 正常状态
            console.log(status,other);    
    }
};

//添加请求监听
instance.interceptors.request.use(function(config){
    
    
    //我们是修改confgi来影响我们的请求的
    let method=config.method;//get不需要处理
    if(method=="post"||method=="put"||method=="delete"){
    
    //处理请求参数
        config.data=qs.stringify(config.data);
    }
    return config;
},function(error){
    
    
    return Promise.reject(error);
});

//添加响应监听
instance.interceptors.response.use((res)=>{
    
    
    console.log("当前的响应状态:"+res.status);
    return res.status==200?Promise.resolve(res):Promise.reject(res);

},(error)=>{
    
    
        const {
    
    response}=error;
        if(response){
    
    
            errorhandler(response.status,response.data.message);
            return Promise.reject(response);
        }
});

export default instance

4.ファイル/src/musicapi/Base.jsを作成します（このファイルにaxiosに必要なパスを書き込みます）

const Base = {
    
    
    baseurl: "/api",
    getusermsg: "/user/detail?uid=",
    getsongbysongid: "/song/url?id=",
    gettuijian: "/recommend/songs",
    getgeci: "/lyric?id=",
}
export default Base

5.ファイル/src/musicapi/musicService.jsを作成します（axiosに戻る方法はこのファイルに記述されています）

import axios from '../utils/http'
import Base from './base'
const MusicService = {
    
    
	findUsermsgById(id){
    
    
        return axios.get(Base.getusermsg + id);
    },findSongBySongId(id) {
    
    
        return axios.get(Base.getsongbysongid + id);
    },findtuijian() {
    
    
        return axios.get(Base.gettuijian);
    }, findgeci(id) {
    
    
        return axios.get(Base.getgeci + id);
    }
}
export default MusicService

6.ファイル/src/musicapi/index.jsを作成します（コンポーネント呼び出しを容易にするために/src/musicapi/musicService.jsを導入します）

import MusicService from './musicService'

export default {
    
    
    MusicService
}

7.コンポーネントはaxiosを使用します

<template>
  <div>
	<h1>axios封装使用</h1>
  </div>
</template>

<script>
import musicapi from "../musicapi";

export default {
    
    
  data() {
    
    
    return {
    
    
      arr: [],
    };
  },
  mounted() {
    
    
    this.getgequmsg();
  },
  methods: {
    
    
    getgequmsg() {
    
    
      let that = this;
      musicapi.MusicService.findtuijian().then(function (response) {
    
    
        that.arr = response.data;
      });
    }
  },
};
</script>