1.封装api

在请求中有时需要更改请求的头部,或增加token,需要封装Axios,新建api.js放在utils文件夹

因为后端只允许两种方式访问,get,post,所以封装api.get()和api.post()

分别是:

//get请求

api.get=async (url,params,)=>{

return await apiAxios('GET',url,params)

}

//post请求

api.post=async (url,params,)=>{

return await apiAxios('POST',url,params)

}

const axios = require('axios')
const baseUrl = 'http://localhost:3000/'
const api = {}

const apiAxios = async (method, url, params) => {
    //项目既定fapp
    let headers = { fapp: 'book', 'Content-Type': 'application/json' }
    //读取存储在sessionStorage中的token
    if (sessionStorage.getItem('token')) {
        headers.token = sessionStorage.getItem('token')
    }
    return await new Promise((resolve => {
        axios({
            //如果缓存里有token则所有请求都包含其
            headers: headers,
            method: method,
            url: baseUrl + url,
            //数据内容
            data:
                method === 'POST' ? params : null,
            params:
                method === 'GET' ? params : null
        }).then((res) => {
            console.log(res.data)
            resolve(res.data)
        }).catch(e => {
            console.log(e)
        })
    }))
}

//get请求
api.get = async (url, params,) => {
    return await apiAxios('GET', url, params)
}
//post请求
api.post = async (url, params) => {
    return await apiAxios('POST', url, params)
}

module.exports = api

之后再挂在Vue的原型链上,Vue.prototype.$api=api

可能出现跨域问题:一般三种解决方法

1.设计反向代理

2.使用jsonp,允许用户传递一个callbac参数给服务器端;

3.在服务器端设置res的头部信息,允许所有请求或部分指定来源的请求.

本项目采用第三种