vue3Axios

最新推荐文章于 2023-12-27 14:24:55 发布

默默努力的小老弟

最新推荐文章于 2023-12-27 14:24:55 发布

阅读量738

点赞数

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/weixin_47039303/article/details/121320949

版权

本文详细介绍了axios库在JavaScript中的使用，包括其创建HTTP请求的优势，如支持Promise、拦截器、跨域解决方案等。通过实例展示了axios的GET和POST请求，以及并发请求的处理。同时，文章还涵盖了axios的常用配置选项，如baseURL、超时设置，并演示了如何进行全局配置和封装axios。最后，提到了请求和响应的拦截器，用于自定义数据处理。

摘要由CSDN通过智能技术生成

网络工具库原生ajax fetch(基于promise设计的
旧浏览器不兼容缺点手动参数)
axios(ajax io system)的优点:
1.从浏览器创建响应对象
2.从node.js发请求
3.支持promise
4.支持拦截请求和响应数据
5.取消请求
6.自动转换json
7.解决跨域问题 csrf/xsrf
8.支持大量的请求方式
使用(基于promise)
命令行创建项目 yarn create @vitejs/app myaxios

cd myaxios//切换文件夹

yarn //导入开发依赖

yarn add axios//添加依赖到工程

import axios from 'axios'
export default{
   setup(){
       const getReq=()=>{
                          axios.get("url",{
	                      params:{ id:'', name:''}
                          }).then((res)=>{//或者post
 									const data=res.data;//axios给你封装了一个对象

        				  }).catch((err)=>{console.log(err)});

    }
      return {getReq};//返回要用的函数

   }


}

3.另外的写法//和jq写法一样 params==data,我认为更加方便,不用自己拼接字符串

 axios({
      method:"get",
      url:"xxx",
      params:{id:11}

   }).then((res)=>{

    }).catch((err)=>{
    })

4.带参数的post请求用data,要与get请求区分

  axios({
      method:"post",
      url:"xxx",
      data:{id:11}

   }).then((res)=>{
        

    }).catch((err)=>{

    
    })

5.黑马: 直接拼接字符串发(当参数只有一两个时)

6.并发请求(多个请求相互依赖) ,与就是promise的写法

 axios.all([
       axios({url:"xxx1"}),
       axios({url:"xxx2"}),
  ]).then((res)=>{
       //返回一个数组
       console.log(res[0]);


   });

//有更加简便的方法,有点绕

axios.all([
       axios({url:"xxx1"}),
       axios({url:"xxx2"}),
  ]).then(axios.spread((res1,res2)=>{//帮你把数组拆分出来



   }));

6.常用的配置选项
baseURl :跟base标签一样!!!方便
自定义请求头: headers:{“X-Requested-With”:“XMLHttpRequest”}
responseType:"json"//buffer二进制
onUploadProgress:function(progressEvent){}//监听文件上传进度事件
onDownloadProgress//下载进度

proxy:{//处理跨域请求,建代理服务器
     protocol:"https",
     host:"127.0.0.1",
     ....
}

timeout:响应过期时间,毫秒 1000
7.全局配置(方便)
如baseUrl

在setup(){
    axios.defaults.baseURL='xxxxxxx';
    //defaults接口可以设置所有axios属性
      axios.defaults.timeout=1000;//
    //写完整路径可以不用拼接
}

8.封装axios

import 'axios' from "axios";

axios.default.header.post['Content-Type']=''//文件上传要更改的配置

//请求拦截

axios.interceptors.request.use((config)=>{//拦截到的配置信息
 	config.abc="abc"//自定义添加数据
	console.log(config)
	return config;//放行
},()=>{
  return Promise.error(error)
})

//响应拦截

axios.interceptors.response.use((response)=>{//拦截到的配置信息
 	//自定义添加数据
	console.log(response)//响应的数据
	return response.data;//放行
},()=>{
  return Promise.error(error)
})

export deault function ajax(url='',params={},type='GET'){
    return new Promise((resolve,reject)=>{
         let promise=null;
         if(type.toUpperCase()=== 'GET'){//转换成大写字母
				promise=axios({
				    url,
				    params
				})
         }else if(type.toUpperCase()=== 'POST'){
					promise=axios({
					    method:'post',
					    url,
					    data:params
					})
           //处理返回
           promise.then((res)=>{
				resolve(res)

           }).catch((err)=>{
				reject(err)
	
           })

	
         }


    })


}

9.axios配置拦截(如上)