axios二次封装，请求数据

一，创建vue.config.js文件：写入一下代码。

module.exports ={
  devServer:{
    proxy:{
      '/api':{
        target:'http://www.liulongbin.top:3007',
        changeOrigin:true,
        pathRewrite:{
          '^/api': ''
        },
      '/my':{
        target:'http://www.liulongbin.top:3007',
        changeOrigin:true,
        pathRewrite:{
          '^/my': ''
        }
      }
      }
    }
  }
}

二，在src下创建utils文件夹，里面创建request.js文件：写入以下代码。

import axios from 'axios'
const request = axios.create({
  baseURL: '/api',
  timeout: 3000
})

// 添加请求拦截器
request.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    config.headers['token'] = localStorage.getItem('token')
    //config.headers['Authorization'] = localStorage.getItem('token')
    return config
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

// 添加响应拦截器
request.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    return response
  },
  function (error) {
    // 对响应错误做点什么
    return Promise.reject(error)
  }
)

export default request

三，在src下创建utils文件夹，里面创建token.js文件：写入以下代码。

export const setToken = (tokenKey, token) => {
  localStorage.setItem(tokenKey, token)
}
//获取token
export const getToken = (tokenKey) => {
  return localStorage.getItem(tokenKey)
}
//删除token
export const removeToken = (tokenKey) => {
  localStorage.removeItem(tokenKey)
}
//删除全部本地数据
export const clearToken = () => {
  localStorage.clear
}

四，在src文件下创建api文件夹，里面创建index.js文件,写入以下代码。

import request from '../utils/request'
import qs from 'qs'
export const loginApi = (data)=>{
  return request({
    method:'POST',
    url:'/login',
    data:qs.stringify(data)

//  data: {
//       username: '张三'
//     }
  })
}


export const loginApi2 = ()=>{
  return request({
    method:'get',
    url:'/students',
  })
}


// export const loginApi2 = () => {
//   return request({
//     method: 'GET',
//     url: '/students',
//     headers: {
//       token: 'eyJhbGciOiJIUzI1NiJ9.eyJ1c2VybmFtZSI6IjEyMyJ9.-kPIkp_Qdf_V-aq5QTRpbLyxqugWfWQEVnAXkRb5N0c'
//     }
//   })
// }


====================================================================================
import request from '../utils/request'
// 注册
export const loginAPI = (data) => {
  console.log(data, 9999)
  return request({
    method: 'POST',
    url: '/api/reguser',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded' //请求头要加这个
    },
    data,
    username:data.username,
    password:data.password
  })
}
// 登录
export const loginAPI1 = (data)=>{
  return request({
    method:'POST',
    url:'/api/login',
    data,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded' //请求头要加这个
    }
  })
}
// 获取用户的基本信息
export const loginAPI2 = ()=>{
  return request({
    method:'get',
    url:'/my/userinfo'
  })
}

五，在app.vue文件里写入

import { loginApi,loginApi2 } from '@/api/index.js'
import { setToken } from '@/utils/token.js'
export default {
  name: 'App',
  data () {
    return {
      ff:{
        username:'张三'
      }
    }
  },
  methods: {
    //注册
    async zhuche() {
      const res = await loginAPI(this.ff)
      console.log(res)
    },
    //登录的时候点击获取token值放到本地存储
    async huoqu(){
      const {data:{status, username, token，username}}=await loginApi(this.ff)
      console.log(status, username, token,username);
      localStorage.setItem('token', token)
      localStorage.setItem('username', username)
        
      //setToken('username', username)
      //setToken('token', token)
      // const src = await loginApi(this.ff)
      // localStorage.setItem('tokne',)
      // console.log(src);
    },
    //请求数据
    async shuju(){
      const str = await loginApi2()
      console.log(str,'数据');
    }
  },
  created(){
    this.huoqu()
    this.shuju()
  }
}

https://www.showdoc.com.cn/escook/3707683594984054