http请求公共方法封装

(1)拿vue-cli项目来说，首先对接api请求，首先我们需要在src下面新建utils再建request.js

       src------>utils--------->request.js

(2)请求我们使用axios 安装axios  

npm i axios -S

（3）request.js中进行引入和封装

import axios from 'axios'

const service = axios.create({
  baseUrl:'http://www/baidi.com', 
  timeout: 5000
})

//请求拦截器进行基本配置
service.interceptors.request.use(config => {
  console.log("打印config出来看看咩耶")
  console.log(config)

  //比如说配置请求头除了登录请求不配置
  if(!config.url.includes("/login"){

    if (localSrorage.getItem("token")) { //存在token配置
      config.headers['Authorization'] = getToken() // 让每个请求携带自定义token 根据实际情况自行修改
    } else {
      config.headers.Authorization = ''
    }

  }


  //设置Content-Type
 if (config.method === 'get') {  //get请求

    config.headers['Content-Type'] = 'application/x-www-form-urlencoded'

  } else {  //其他请求

    if (config.url.includes('/api/upload')) { // 上传文件 接口配置请求头
      config.headers['Content-Type'] = `multipart/form-data`
    } else {  //其它非get请求非上传文件请求
      config.headers['Content-Type'] = 'application/json'
    }

  }


  return config
},
  error => {
    return Promise.reject(error)
  }
)

//响应拦截器进行一个基本的处理
service.interceptors.response.use(
  response => {  //响应成功
   //成功逻辑
   //...

   //返回成功响应
   return response
  },
  error = > { //响应失败
   //eg: 失败逻辑  比如 promise 返回错误信息
    return Promise.reject(error)
  }
)

export default service

(4)在src下新建api再新建test.js封装请求

    src-------api----user.js

import request from '@/utils/request'

//实际请求https://www.baidu.com/test?a=1
export function test(){
  return request({
    url:'/test',
    methods:'get',
    params:{
      a:1
    }
  }) 
}

//实际请求https://www.baidu.com/test2     请求的body中request payload中 {a:2}
export function test2(){
  return request({
    url:'/test2',
    methods:'post',
    data:{
      a:2
    }
  }) 
}

上面就封装好了基本的http请求公共方法啦，然而在项目中需要考虑的其实有很多,自行在添加请求逻辑或者响应逻辑罗！！