vue axios封装api

1、安装axios ：npm i axios

2、在src 文件夹中新建netWork文件夹，放入两个文件：http.js和app.js

3、http文件如下： （1）引入axios：import axios from axios （2）环境切换：development：开发环境；production：生产环境

if (process.env.NODE_ENV == "development") { axios.defaults.baseURL = "http://XXX" } if (process.env.NODE_ENV == "production") { axios.defaults.baseURL = "https://XXX } if (process.env.NODE_ENV == "debug") { axios.defaults.baseURL = "https://XXX" }

（3）设置超时时间

axios.defaults.timeout = 10000

（4）设置请求拦截和响应拦截

//请求拦截 axios.interceptors.request.use( config => { config.headers = { DeviceType: "H5" } const token = store.state.token; return config }) //响应拦截 对响应的数据做处理 axios.interceptors.response.use( response => { return response }, error => { if (error.response.status) { } } )

这里说一下token，一般是在登录完成之后，将用户的token通过localStorage或者cookie存在本地，然后用户每次在进入页面的时候（即在main.js中），会首先从本地存储中读取token，如果token存在说明用户已经登陆过，则更新vuex中的token状态。然后，在每次请求接口的时候，都会在请求的header中携带token，后台人员就可以根据你携带的token来判断你的登录是否过期，如果没有携带，则说明没有登录过。这时候或许有些小伙伴会有疑问了，就是每个请求都携带token，那么要是一个页面不需要用户登录就可以访问的怎么办呢？其实，你前端的请求可以携带token，但是后台可以选择不接收啊！ （5）设置请求方式（get、post）

export function get(url, params) { return new Promise((resolve, reject) => { axios.get(url, { params: params }).then(res => { resolve(res) }).catch(err => { reject(err) }) }) } export function post(url, params) { return new Promise((resolve, reject) => { axios.post(url, params) .then(res => { resolve(res) }).catch(err => { reject(err) }) }) }

4、api.js中内容如下： （1）先引入http.js中的get和post方法

import {get,post} from '../http.js'

（2）写入请求地址

export function getbanner(){ return get('/xxx') }

5、在main.js里面全局注册使用

import api from './netWork/api.js' Vue.prototype.$api = api

6、在组件内使用

this.$api.getbanner()