axios二次封装

axios的使用以及二次封装

一:axios的使用

1.下载

javascript 复制代码
npm i axios -S

2.引入

javascript 复制代码
import axios from 'axios'

3.使用

axios.get()

axios.post()

axios({

url:'',

method:'',

data:'post传值方式'

}).then(res=>

console.log(res)//后端给前端返回的数据

)

二:vue中的二次封装

1.终端下载

javascript 复制代码
npm i axios -S

2.main.js中引入

javascript 复制代码
import axios from "axios";

3.封装axios实例--http.js

引入相关内容并创建axios实例

javascript 复制代码
// axios的二次封装
// 引入axios
import axios from 'axios'
// 引入token
import {useUserStore} from '@/stores/userStore'
// 引入路由
// import { useRouter } from 'vue-router';
import router from '@/router';
// 创建axios实例
const httpInstance = axios.create({
    // 设置基地址
    baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net',
    //  设置超时时间
    timeout: 20000
})

4.添加请求拦截器

config参数

config 对象是由 Axios 库在内部创建并传递给拦截器函数的。当你使用 Axios 发起一个 HTTP 请求时,Axios 会根据你提供的请求配置选项(如 URL、方法、头信息等)创建一个 config 对象。这个对象包含了请求的所有必要信息。

添加响应拦截器并导出

javascript 复制代码
// 拦截器
// 添加请求拦截器
httpInstance.interceptors.request.use(function (config) {
  const useStore=useUserStore()
    // 1.从pinia获取token数据
  const token=useStore.userInfo.token
    // 在发送请求之前做些什么
    //判断token是否存在
    if(token){
    //将token按照后端的要求拼接一下,并且加到请求头上面。
   config.headers.Authorization=`Bearer ${token}`
    }
    //将修改后的config返回出去
   return config;
  }, 
  //没有获取到token,返回错误
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

5.添加响应1拦截器

javascript 复制代码
httpInstance.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 拿到reponse之后可以对响应数据做一些操作
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    // 利用拦截器做了一个统一的配置,为什么要写在拦截器里面,因为有很多共同的操作会报错
    ElMessage({
      message:error.response.data.msg,
      type: 'warning',
    })
    // 401token失效处理
    const userStore=useUserStore()
    // 2.跳转到登录页
    if(error.response.status===401){
    // 1.清除本地用户数据
      userStore.clearUserInfo()
    // 2.跳转到登录页
      router.push('/login')
    }
    // 返回错误提示
    return Promise.reject(error);
  }); 
// 导出
export default httpInstance

6.封装请求API

javascript 复制代码
// 获取详情接口,实例里面有请求拦截器,响应拦截器,超时时间,请求基地址。
import httpInstance from "@/utils/http";
export const getCheckoutInfoAPI = () => {
    return httpInstance({
      url:'/member/order/pre'
    })
  }
export const createOrderAPI=(data)=>{
return httpInstance({
  url:'/member/order',
  method:'POST',
  data
})
}

7.组件内使用

javascript 复制代码
//引入相关发送请求的API
import {getCategoryFilterAPI,getSubCategoryAPI} from '@/apis/category.js'
import { onMounted} from 'vue'
// 获取面包屑导航数据
//创建容器
const categoryData=ref([])
const getCategoryData=async ()=>{
//调用API并传入参数
 const res=await getCategoryFilterAPI(route.params.id)
 categoryData.value=res.data.result
}
onMounted(()=>{
  getCategoryData() 
})
相关推荐
dy171723 分钟前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918414 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂5 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技5 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip5 小时前
JavaScript二叉树相关概念
前端
一朵梨花压海棠go5 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
attitude.x6 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java6 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)6 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5