axios

axios

用于浏览器和 node.js 的基于 Promise 的 HTTP 客户端
gitHub官网地址：https://github.com/axios/axios

安装

npm i axios -S

1、request.js中封装请求拦截器和响应拦截器

import axios from 'axios'//它是一个HTTP工具，用于与后端进行数据交互。
//生产环境
//测试环境
//开发环境
// const baseURL = "http://localhost:8080"
//要是跨域的话，就请求本地服务器跳转到vue.config.js解决跨域问题

//c创建一个axios实例
const instance = axios.create({
    // baseURL,
    timeout: 7000,
    headers: {}
})

//封装请求拦截器
instance.interceptors.request.use((config)=> {
    //在请求被send出去之前，你可以在这里做一些事情
    console.log('请求拦截器', config)
    //每次发送请求之前都要携带token鉴定身份去访问后端数据库
    return config
}, (error)=> {
    return Promise.reject(error)
})

//封装响应拦截器
instance.interceptors.response.use((res) =>{
    console.log('响应拦截器', res)
    return res
},  (error)=> {
    return Promise.reject(error)
})


export default instance

2、发送http请求

import request from '../request'
const realFix = '/api/realfix-v2-app'

//get请求
export function listStateInfo() {
  return request({
    url: `${realFix}/activity/state-list`,
    method: 'GET',
  })
}

//post请求
export function addPrize(data) {
  return request({
    url: `${realFix}/activity/add-prize`,
    method: 'POSt',
    data,
  })
}

3、配置vue.config解决本地请求跨域

module.exports = {
  devServer: {
    proxy:{
      //当访问自己本地的ip端口号时，代理到target指向
      '/api': {
        // target: 'http://autel-cloud-gateway-dev.autel.com',
        target: 'http://autel-cloud-gateway-testus.autel.com',
        ws: true, // 代理的WebSockets
        changeOrigin: true, // 允许websockets跨域
        pathRewrite: {
          '^/api': '',
        },
    }
  }
}