vue axios 封装

axios 是如何封装 HTTP 请求的

1. 本地数据-data/test.json

{
  "Status": 200,
  "Msg": "Message",
  "data": [
    {
      "name": "firstName",
      "age": 19
    },
    {
      "name": "secondName",
      "age": 20
    }
  ]
}

*2.服务器数据- 跨域api

devServer: {
    proxy: {
      //开发环境（dev）中解决了跨域问题
      "/api": {
       target: 'https://c.y.qq.com/v8/fcg-bin/', //设置你调用的接口域名和端口号 别忘了加http
        secure: false, // 如果是https接口，需要配置这个参数
        changeOrigin: true,
        pathRewrite: {
          "^/api": "" //用"/api"代替target里面的地址
        }
      }
    },

api/fetch.js

import axios from "axios";
export function fetch(options) {
  return new Promise((resolve, reject) => {
    const instance = axios.create({
      headers: {
        // 'Content-Type':'application/json',
      },
      timeout: 10000
    });
    //拦截请求
    //发送请求之前，我们可以对请求的配置参数（config）做处理
    instance.interceptors.request.use(
      response => {
        // layer.load('1231');
        console.log("请求成功！：", response);
        return response;
      },
      err => {
        console.log("请求错误！：", err);
        return Promise.reject(err);
      }
    );
    //拦截响应
    // 请求得到响应之后，我们可以对返回数据做处理。
    // 当请求或响应失败时，我们还能指定对应的错误处理函数。
    instance.interceptors.response.use(
      response => {
        console.log("响应成功！：", response);
        return response;
      },
      err => {
        console.log("响应错误！：", err);
        return Promise.reject(err);
      }
    );
    instance(options)
      // axios(options)
      .then(respose => {
        // 过滤了两次status==‘200’，
        // 第一次过滤浏览器请求是否成功，
        // 第二次确保后来处理完毕的数据是否准确无误的
        if (respose.status == "200") {
        //  if (respose.data.Status == "200") {
            resolve(respose.data);
        //  } else {
        //    reject(respose.data.Msg);
       //   }
        }
      })
      .catch(err => {
        reject(err);
      });
  });
}

api/apis.js

import { fetch } from "./fetch";
export function getTestData() {
  return fetch({
    url: "/test",
    method: "get"
  });
}
export function getTopList() {
  return fetch({
    url: "/api/fcg_myqq_toplist.fcg",
    method: "get"
  });
}

export function getMusicList(topid) {
  return fetch({
    url: "/api/fcg_v8_toplist_cp.fcg",//'https://c.y.qq.com/v8/fcg-bin/fcg_v8_toplist_cp.fcg'
    method: "get",
    params: {
      topid,
    }
  });

XX.vue

import {getTestData,getTopList,getMusicList} from '@/api/apis.js'
  mounted() {
  getTestData().then(response=>{
     this.data = response.data;
        console.log('response',response);
    }).catch(function(error) {
        // 请求失败处理
        console.log(error);
      });
  }
 getTopList()
        .then(res => {
          const resdata = res.data;
          let num1 = resdata.indexOf("(");
          let num2 = resdata.length - 1; 
          let resultData = JSON.parse(resdata.substring(num1 + 1, num2));
          this.topList = resultData.data.topList;
        })
        .catch(e => console.log(e));
}
methods: {
    getList() {
      getMusicList(this.$route.params.id).then(res => {
        const resdata = res.data;
        this.songlist = resdata.songlist;
      }) .catch(e => console.log(e));;
    }
  }