本文介绍: 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博客

原文地址:https://blog.csdn.net/qq_45796592/article/details/128585095

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

如若转载,请注明出处:http://www.7code.cn/show_51019.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注