axios二次封装_代码007(未授权)

本文介绍: axios二次封装的思路

npm install axios -S

// 对于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

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

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 二次封装

第一章、前言

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是什么

1.2 axios二次封装的原因

1.3 axios的特性

第二章、axios的二次封装

2.1 axios安装

2.2 axios封装一般步骤

2.3 axios封装常用的配置项

2.4 使用封装的axios

相关文章

发表回复 取消回复

发表回复取消回复