api的接口封装

对vue项目中api接口的封装管理 :

在src下创建network文件夹。network文件夹下创建api.js和http.js。 http.js主要用来统一管理项目http文件夹下api请求，主要用来方便管理接口。 在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护，直接推荐我们使用axios库。 主要有以下步骤：

axios封装步骤

1.安装axios

npm install axios; // 安装axios

2.在http.js中引入axios

import axios from 'axios';

3.环境的切换 我们的项目环境可能有开发环境、测试环境和生产环境。我们通过node的环境变量来匹配我们的默认的接口url前缀。axios.defaults.baseURL可以设置axios的默认请求地址就不多说了。 在http.js中： 其中

development 为测试环境

production 为开发环境

4 .通过axios.defaults.timeout设置默认的请求超时时间。例如超过了10s，就会告知用户当前请求超时，请刷新等。

axios.defaults.timeout=5000;

5.、请求拦截 我们在发送请求前可以进行一个请求的拦截，为什么要拦截呢，我们拦截请求是用来做什么的呢？比如，有些请求是需要用户登录之后才能访问的，或者post请求的时候，我们需要序列化我们提交的数据。这时候，我们可以在请求被发送之前进行一个拦截，从而进行我们想要的操作。

// 请求拦截器

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

// 响应拦截器 // axios.interceptors.response.use( // response => {

// }, // error => { // if (error.response.status) {

// } // } // )

7、在页面中引入对应的函数

import { xxx} from "./../../api/api";

通过async await 语句调用对应的函数