项目网络请求模块封装——简单实用

vue项目开发过程，页面请求数据会向服务器发起请求，用户进行交互也会发起请求，为了统一管理这些请求，我们将其封装成独立的方法；并在需要的地方按需引入；这样极大方便以后对项目的维护……
axios封装

 axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，
 例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等

安装：npm i axios --save

1. 新建api文件夹，生成axios.js和method.js;

axios.js用来创建axios实例，method.js用来定义请求到方法

2. axios.js代码如下

import axios from 'axios';

const service = axios.create({
    
    
  baseURL: '/api',
  timeout: 6600,  //超时时间
});

3. 请求拦截与相应拦截

// 添加请求拦截器
service.interceptors.request.use(config => {
    
    
  // 在发送请求之前做些什么
  if (localStorage.getItem('token')) {
    
    
	//请求头设置token或作者
  	//config.headers.token = 'Bearer ' + localStorage.getItem('token')
    config.headers.Authorization = 'Bearer ' + localStorage.getItem('token')
  }
  return config
}, error =>
  // 对请求错误做些什么
  Promise.reject(error),
);

// response interceptor
service.interceptors.response.use(
  response => {
    
    
	return response
  },
  error => {
    
    
    console.log('err' + error) // for debug
    return Promise.reject(error)
  }
)
//抛出实例对象
export default service

method.js代码

import request from './request'

export function login(data) {
    
    
  return request({
    
    
    url: '/vue-element-admin/user/login',
    method: 'post',
    data
  })
}