vue3引入axios

2022-08-16 15:32:05 阅读：148 来源： 互联网

标签：function axios return 请求 vue3 error 引入 import

　　1.下载axios

npm install axios --save

　　2.在scr目录下自定义一个 reques t文件夹

　　3.在刚刚建的文件夹中创建一个引入axios的api.js文件

　　4.api.js里引入

import axios from 'axios'

　　5.设置默认前缀以及请求时间传参类型拦截器等等.....

import axios from 'axios'
import { ElMessage } from 'element-plus'  //这个是引入的Element 3.0的提示消息

const service = axios.create({
    baseURL: 'http://........', // 自己项目中请求地址前缀部分
    timeout: 60000, // 请求超时时间毫秒
    withCredentials: true, // 异步请求携带cookie
    headers: {
        // 设置后端需要的传参类型
        'Content-Type': 'application/json',
        'token': 'your token',
        'X-Requested-With': 'XMLHttpRequest',
    },
})

// 添加请求拦截器
service.interceptors.request.use(
    function (config) {
        // 在发送请求之前做些什么
        return config
    },
    function (error) {
        // 对请求错误做些什么
        console.log('出错了',error)
        return Promise.reject(error)
    }
)

// 添加响应拦截器
service.interceptors.response.use(
    function (response) {
        console.log('响应了',response)
       
        // 这个地方响应了数据该做点什么 做想做的事情
        // dataAxios 是 axios 返回数据中的 data
        const dataAxios = response.data
        // 这个状态码是和后端约定的
        // const code = dataAxios.reset
        return dataAxios
    },
    function (error) {
       
        // 对响应错误做点什么
        console.log('出错了',error)
        ElMessage({
            message: '接口报错了',
            type: 'success',
          })
        return Promise.reject(error)
    }
)
export default service   //最后暴露出去

　　6.在src目录下新建一个统一储存接口的地方比如创建一个文件夹apis 文件夹下可以分模块来放置对应的请求的接口然后引入刚刚设置的axios

import httpRequest from '../request/api'

// 获取用户信息
export function userLogin(param) {
    return httpRequest({
        url: '/posts',  //自己请求的接口
        method: 'get',  //请求方式
        data: param,    //参数
    }) 
}

　　7.在项目中使用

<script setup>

import { onMounted } from 'vue'

import { userLogin } from '@/apis/login' //这里引入的就是刚刚添加的接口

function getUserInfo() {
     const param = {rows:10,page:1}  //自己组装参数
     userLogin(param).then((res) => {
         console.log(res)
     })
}
/**
  相当于Vue2的mounted生命周期
 *vue3没有created 和beforeCreated了 
 * 
 */
onMounted(() => {
  console.log('222')
     getUserInfo()
})
</script>

标签：function,axios,return,请求,vue3,error,引入,import
来源： https://www.cnblogs.com/zyzlb/p/16591702.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue3引入axios