axios二次封装

目录

第一章、前言

1.1 axios是什么

1.2 axios二次封装的原因

1.3 axios的特性

第二章、axios的二次封装

2.1 axios安装

2.2 axios封装一般步骤

2.3 axios封装常用的配置项

2.4 使用封装的axios

第一章、前言

1.1 axios是什么

• 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，简单的理解就是ajax的封装
• 在使用Vue.js框架开发前端项目时，会经常发送ajax请求服务端接口，在开发过程中 需要对axios进一步封装，方便在项目中的使用

1.2 axios二次封装的原因

• 进行二次封装主要使用到的就是两个拦截器：
• 请求拦截器：在发送请求之前处理一些公共的业务
• 响应拦截器：当服务器数据响应之后又处理一些事情

1.3 axios的特性

• 从浏览器中创建 XMLHttpRequest
• 从 node.js 发出 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换JSON数据

第二章、axios的二次封装

2.1 axios安装

npm install axios -S

2.2 axios封装一般步骤

• 在项目根目录的src文件夹下新建一个utils文件夹(utils文件夹常用于放其他js插件)

• 在文件夹下放request.js文件,在request.js中首先导入axios

 

• 然后设置属性，比如baseURL（公共地址）和 timeOut (超时时间）

• 还可以设置响应拦截和请求拦截，在请求拦截中经常设置loading动画的开启和配置请求头的token
• 在响应拦截中可以关闭loading和根据后端返回的状态码检测token是否有效
• 最后把requests（注意这里是我们创建的axios对象）暴露出来

大致代码：

// 对于axios进行二次封装
import axios from "axios";
// 引入进度条
import nprogress from "nprogress";
// 引入进度条样式
import "nprogress/nprogress.css"
//在当前模块引入store 
import store from '@/store'
 
//1、利用axios对象的方法create,去创建一个axios实例
// 2、request就是axios，只不过稍微配置一下
const requests = axios.create({
    // 配置对象
    // 基础路径,发请求时，路径会出现api
    baseURL:'/code',
    // 代表请求时间
    timeout:5000
})
// 请求拦截器：在请求之前，请求拦截器可以检测到，在发出去之前做一些事
requests.interceptors.request.use((config)=>{
    // 进度条开始动
    nprogress.start()
    // console.log(1,store)
    if(store.state.detail.uuid_token){
        //请求一个头字段id
        config.headers.userTempId = store.state.detail.uuid_token
    }
    //判断需要携带token带给服务器、
    if(store.state.user.token){
        config.headers.token = store.state.user.token
    }
    return config;
});
// 响应拦截器
requests.interceptors.response.use((res)=>{
    // 成功的回调函数
    // 进度条结束
    nprogress.done()
    return res.data;
    },(error)=>{
        // 失败的回调函数
        return Promise.reject(new Error('faile'));
})
// 暴露
export default requests

2.3 axios封装常用的配置项

axios.create、axios.interceptors.request.use、axios.interceptors.response.use

Vue.js Ajax(axios) | 菜鸟教程

2.4 使用封装的axios

• 在文件api根目录index.js文件使用：

//引入
import requests from "./request.js"; //路劲自己修改
 
export const login = (params) => {
    return requests({
        url: "接口路径",
        method: "post" ,   //后端给什么写什么
        data: params
    })
}

然后页面引用——

这里用到的就是vue中的store存储数据(注意这里只是示范，登录获取的token信息一般会永久存储在浏览器)：

import {login} from '@/api'
 
const state ={
    //用户登录信息/token
    userLogin:"",
}
const mutations={
    GATLOGIN(state,value){
        state.userLogin = value
    },
}
const actions={
    async getLogin({commit}){
         //这里的data（用户登录账号密码）需要传参
         let result = await login(data);
         //console.log(result)
         if(result.code === 200){
             commit("GATLOGIN",result.data)
             //console.log(result.data)
         }
    },
}
const getters={
}
export default{
    state,
    mutations,
    actions,
    getters
}

• 如果目标是与数据库打通前后端（这里里面的传参数据是为了方便描述写的，具体需要分析）

axios.get("http://localhost:8080/api/userLogin/userLoginlist(url路径)",{
   params:{
      userPassword:this.ruleForm.pass,
      userId:this.userId
  }
}).then(
  res=>{
      this.$message({
           message:'用户信息修改成功',
           type:'success'
      })
  },
  error=>{
      console.log("b",error.message)
  }
)

axios.post('/axios-server',{
        username:'admin',//请求体
        password:'admin'
    },{
    params:{
        id:100,
        vip:7
    },
})

axios请求：

AJAX及其相关知识应用（很详细）_❆VE❆的博客-CSDN博客