Vue 学习之 axios

目录

执行安装命令：npm install axios

 使用的时候导入

axios 封装

是一个基于 promise 的 网络请求库，作用于浏览器和 node.js 中。使用 Axios 可以在前端项目中发送各种方式的 HTTP 请求。

停止服务，在所在项目终端，

执行安装命令：npm install axios

查看是否安装成功，依赖中存在 axios 就是安装成功

 使用的时候导入

import axios from ‘axios’

axios 官网

请求配置 | Axios 中文文档 | Axios 中文网

• params 的对象参数名和值，axios 的源码会把参数和值，拼接在 ulr？后面拼接给后台

• data 的对象参数和值，axios 源码会把参数和值，拼接·在请求体（body 参数）

• headers 将传递的参数挂载到 请求头 上

axios 封装

下面几乎 就是固定写法，拿来就用，封装了基础的路径，对每个请求进行拦截并添加 token，

import axios from 'axios'
const instance = axios.create({
    // 基路径
    baseURL: 'http://localhost:8080/kongkongSelect',
    timeout: 1000,
  });
  // 添加请求拦截器
 instance.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    // 存在 token 则往 header 里面添加一个 token
    if(localStorage.getItem('token')){config.headers.token=localStorage.getItem('token')
    }
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么
    // 如果后台报错提示一下，后台报错和 axios 报错  执行的位置不一样
    if(response.data.code!=200){//   提示一下}
    // 这个地方返回的东西就是你调用的时候 res 得到的东西
    return response;
  }, function (error) {
    //axios 报错执行这里
    // 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么
    return Promise.reject(error);
  });
 // 最后导出
  export default instance

最后需要 export default，export default  和 export 区别看这篇文章

export 与 export default 区别

http://t.csdnimg.cn/i7gOghttp://t.csdnimg.cn/i7gOg

调用上面导出，export default 则不需要{}，并可以起任意名称，因为只有一个不会引起歧义

import request from '@/utils/request'
/**
 *
 * 员工管理
 *
 **/
// 登录
export const login = (data: any) =>
  request({
    'url': '/employee/login',
    'method': 'post',
// `data` 是作为请求体被发送的数据 仅适用 'PUT', 'POST', 'DELETE 和'PATCH'请求方法'data': data
  })
   // 分页查询
   export const EmployeepageList = (params: any) =>
    request({
      'url': `/employee/page`,
      'method': 'get',
//   可以简写为 params, 但前提是参数是 params
      'params':params 
    })

传递数据的时候一般传递的是 JSON 字符串

注：在使用 axios 时，经常会遇到跨域问题。为了解决跨域问题，可以在 vue.config.js 文件中配置代理：

const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    port:8081,
    proxy:{
      '/api':{
        target: 'http://localhost:8080',
         pathRewrite: {'^/api': ''}
      }
    }
  }
})