vue2 封装网络请求 axios_vue2封装axios请求

1. 在终端输入命令：

npm install axios

2.在根目录新建一个 request 文件夹 专门存放网络请求相关的文件

# 新建一个文件：根据不同的开发环境，配置不同的请求

//2.根据process.env.NODE_ENV
//开发环境：development;
//生产环境：production ;
//测试环境：test ;
let BASE_URL = ''
let TIME_OUT = 10000
if (process.env.NODE_ENV === 'development') {
  BASE_URL = '/api'
} else if (process.env.NODE_ENV === 'production') {
  BASE_URL = 'http://jiang.org/prod'
} else {
  BASE_URL = 'http://jiang.org/test'
}
//在将这两个东西导出
export { BASE_URL, TIME_OUT }

3.接下来我们可以新建一个 文件servies.js 创建axios 实例

import axios from "axios";
// 导入loading Loading 服务
import { Message } from 'element-ui'
import {BASE_URL, TIME_OUT } from './config' //不同环境的请求配置
export function request(config){
    const service =axios.create({
        baseURL:BASE_URL, //配置公共接口
        timeout:TIME_OUT //配置请求超时时间 
      })
      // 请求拦截器
service.interceptors.request.use(config=>{
//这里可以做token 设置
    return config
},err=>{})
 
// 响应拦截器
service.interceptors.response.use(res=>{
if(res.status===200){
 Message({
    message: '请求成功',
    center: true
 })
}else if (res.status===401) {
    Message({
        message: '未授权，请重新登录',
        center: true
     })
} 
  console.log(res)
  return res
  
},err=>{
  return err
})
   return service(config)  
 
}

4.封装post，get,patch  请求

//封装post，get,patch 请求
import { request } from "./servies";
 const jyRquest={
    //  post 封装请求
    post(config){
     return request({...config,method:'POST'})
    },
    get(config){
        return request({...config,method:'GET'})
    },
    patch(config){
    return request({...config,method:'PATCH'})
       }
}
export default jyRquest

5.封装真正的请求

import jyRequest from "../index";
// 登录验证请求
export function accountLoginRequest(account){
    return jyRequest.post({
        url:'/login',
        data:account
    })
}

6.在页面使用封装的请求方法

accountLoginRequest(account).then(res=>{
             const {id,name,token}=res.data
            })