vue 封装propmise 第二种

Posted 2021-07-08 fengshaopu

一、目录

1.下载
2.放到src目录下
3.main导入
4.使用

1.下载
去我的git上去下载utils
https://gitee.com/fengshaopu2001/p7/tree/master/d/src
2.放到src目录下
下载完放到 vue的src下面

//1. 先导入axios对象
import axios from 'axios';
import store from '../store'
import jsonBig from 'json-bigint'

//2. 创建axios的对象
const Server = axios.create({
    baseURL: "http://ttapi.research.itcast.cn/app/", //基础url地址
    **//解决大数字问题**
  //  transformResponse: [function (data) {
    //      try {
            // 如果转换成功则返回转换的数据结果
     //         return jsonBig.parse(data)
     //     } catch (err) {
            // 如果转换失败，则包装为统一数据格式并返回
         //     return {
         //         data
            }
        }
    }],
    // http://toutiao.m.lipengzhou.com/
    timeout: 8000,//超时时间
});

//3. 请求拦截器配置
Server.interceptors.request.use((config) => {
 //解决header携带token问题
   // let { user } = store.state
    //console.log(user);
    //if (user && user.token) {
    //    config.headers.Authorization = `Bearer ${user.token}`
    //}
    // let token = sessionStorage.getItem("token-for-the-kin");

    //  if(store.state.token.length>0){
    //     config.headers['Authorization'] = store.state.token;

    //  }

    return config;
}, (error) => {
    return Promise.reject(error);
});

//4. 相应拦截器
Server.interceptors.response.use((response) => {
    console.log(response);
    //过滤返回的data值
    if (response.status == 200) {
        return response.data;
    }

    return response;
}, (error) => {
    return Promise.reject(error);
});



//5. 抛出对象接口
export default Server;

3.main导入

import axios from './utils/request.js'
Vue.prototype.$axios = axios

这里导入了还不能使用还得用命令行下载个插件

npm install json-bigint --save

4.使用

   this.$axios.get("v1_0/user/followings").then(res => {
        //关注
        console.log(res);
        this.list = res.data.results;
        console.log(this.list);
      });