vue2接口的封装

目录格式放在最后 可以查看

1.配置完成router后 ，可以在router内新建request.js文件（在任何地方都可以）

import axios from "axios"; //原生的axios

//用来拦截用的

axios.defaults.headers.post["Content-Type"] = "application/json;charset=utf-8";

//创建一个单例

const http = axios.create({

    baseURL: 'http://www.trustwigs.com/', //域名

    timeout: 5000, //响应时间

    // headers:{"Content-Type":"application/json;charset=utf-8"},

})

//拦截器  -请求拦截

http.interceptors.request.use(config => {

    //部分接口需要token

    let token = localStorage.getItem('token');

    if (token) {

        config.headers.token = token;

        // config.headers ={

        // 'token':token

        // }

    }

    return config;

}, err => {

    return Promise.reject(err)

})

//拦截器  -响应拦截

http.interceptors.response.use(res => {

    if (res.data.code === 2000) {

        return Promise.resolve(res.data)

            //这里读者们可以根据服务器返回的数据去自行修改

    } else {

        return Promise.reject(res.data)

    }

}, err => {

    return Promise.reject(err)

});

//整体导出

export default http;

2.在根目录建vue.config.js

module.exports = {

  devServer:{

    host:'localhost',   // 默认是 localhost,可不配置

    port:8080,   // 配置端口号

    proxy:{

      '/api':{    // 被代理的接口名

        target:'http://foods.1demo.cc',//要跨域的域名 

        changeOrigin:true//是否开启跨域

      }

    }

  }

}

3.新建api文件，在api文件内部建index.js

这里是接口存放调用的地方

import request from '@/router/request'

// 头部

export function Header() {

  return request({

    url: '/api/head/head',

    method: 'get',

  })

}

// 首页

export function index() {

  return request({

    url: '/api/index/index',

    method: 'get',

  })

}

这里漏了一点，就是关于端口和域名的封装使用。链接不同后端的电脑，需要换不同的ip：

这些就是创建实例中 baseURL：里面引进的，下边另一个env.production也是相同的东西，开放时两者必须一致。