vue3.0 +element-puls框架 封装axios_vue3 +element-plus 封装axios

1. 先创建一个叫utils文件夹，在utils下面创建一个axios.js 文件用来封装请求

这个是axios.js

import axios from "axios"; //原生的axios
import {
  ElLoading,
  ElMessage
} from 'element-plus'


//用来拦截用的
axios.defaults.headers.post["Content-Type"] = "application/json;charset=utf-8";
//创建一个单例
const http = axios.create({
  baseURL: 'http://192.168.1.188:8008',
  timeout: 5000, //响应时间
  // headers:{"Content-Type":"application/json;charset=utf-8"},
})

//拦截器  -请求拦截
http.interceptors.request.use(config => {
  //部分接口需要token
  let token = localStorage.getItem('token');
  if (token) {
    config.headers.token = token;
  }
  return config;
}, err => {
  return Promise.reject(err)
})

//拦截器  -响应拦截
http.interceptors.response.use(res => {
  if (res.code !== 200) {
    return Promise.reject(new Error(res.data, "拦截器响应请求"))
  } else {
    return res
  }
}, err => {
  return Promise.reject(err, "返回到接口提示报错")
});

//整体导出
export default http;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

2.在utils下面再创建一个http.js 文件用来封装api接口

//将拦截器整体导入
import request from './axios.js' //导入已经写好的拦截器

// 封装所有的API接口
// 密码登录接口
export function doLogin(params){
  console.log(params)
  return request({
    url:'/callComponent/yl.login/doLogin',
    method :'post',
    params:params,
  })
}


// 发送短信验证码
export function sendSms(params){
  return request({
    url:'/app/yl.sendSms',
    method :'get',
    params:params,
  })
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

3.在组件中使用

 import {doLogin } from "../../../until/http.js" //按需要去引入方法
  // 登录验证
  const submitForm = (formEl) => {
    let obj = {
      "logo": "HC",
      "username": ruleForm.phon,
      "passwd": ruleForm.pass,
      "errorInfo": ""
    }
    if (!formEl) return
    formEl.validate((valid) => {
      if (valid) {
      //请求登录接口
        doLogin(obj).then((res) => {
          console.log(res, "登录")
          // if (res.code === 2000) {
          //   this.$message({
          //     message: '登录成功!',
          //     type: 'success',
          //     duration: 1500
          //   });
          //   setTimeout(() => {
          //     let token = res.data.token;
          //     localStorage.setItem("token", token);
          //     //有需要存token的就可以在这里存储了
          //     this.$router.push('/index');
          //     //这里就可以转到指定的路由
          //   }, 1550);
          // } else {
          //   this.$message({
          //     type: 'info',
          //     message: res.message,
          //     duration: 1500
          //   });
          // }
        }).catch((err) => {
          console.log(err)
        })
      } else {
        return false
      }
    })
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

完成了 希望对大家有所帮助