axios实例

为什么要创建axios实例,它与我们直接使用的axios.get这样的写法有什么区别?
  • 引入axios,然后在页面中进行请求axios.get(‘url’).then(res=>{}),这里默认会导出实例,通常使用这个axios就可以了
  • 而之所以要创建axios实例,是因为我们实际工作项目中,可能需要访问多个服务地址,而这些服务请求和响应的结构也可能都完全不同,那么你可以通过axios.create创建不同的实例来处理。
  • 比如axios1是用http状态码确定响应是否正常,而axios2是服务器自己定义的状态码,又或者他们请求头不同,支持的content-type不同,那么我可以单独为axios1和axios2写拦截器。
axios实例的配置
    //常用的基本配置
    axios.create({
        baseURL:'http://localhost:8080', //请求的域名,基本地址
        timeout:5000,  //请求的超时时长,单位毫秒
        url:'/data.json',  //请求的路径
        method:'get,post,put,patch,delete' , //请求方法
        headers:{
            token:''  //比如token登录鉴权,请求的时候携带token,让后端识别登录人的信息
        },   //请求头
        params:{},  //请求参数拼接在URL上
        data:{},    //请求参数放在请求体里

    })
axios全局配置
//axios.defaults.后边跟的就是axios的那些配置
//一般修改的全局配置,也就下边这两个
axios.defaults.timeout = 1000 
axios.defaults.baseURL = 'http://localhost:8080'
axios实例配置
//如果create()里不添加参数的话,在创建这个axios实例的时候,使用的就是全局的配置
// 这个时候instance的timeout是1000
const instance = axios.create(); 

//如果设置了全局的配置,但是又想在创建的实例里修改配置怎么办
instance.default.timeout = 3000
axios请求配置
    let instance = axios.create();
    instance.get('/data.json',{
        timeout:5000
    })

这3种配置方法的优先级是 axios请求配置 > axios实例配置 > axios全局配置

JavaScript中,axios是一个基于Promise的HTTP客户端,用于浏览器和node.js中发起HTTP请求。自定义axios实例通常涉及创建一个axios实例,并对这个实例进行配置以满足特定需求。以下是创建和配置axios实例的基本步骤: 1. 首先,需要安装axios库。如果是在Node.js环境中,可以使用npm或yarn命令安装。在浏览器中则可以通过script标签引入axios的CDN链接。 2. 创建axios实例: ```javascript const axios = require('axios'); // Node.js环境 // 或者在浏览器中引入axios // <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> const instance = axios.create({ baseURL: 'https://api.example.com', // 基础URL timeout: 1000, // 请求超时时间 headers: {'X-Custom-Header': 'foobar'} // 自定义请求头 }); ``` 3. 配置实例。创建实例后,可以根据需要对其添加拦截器,以便在请求发送前或响应接收后执行一些操作。 添加请求拦截器: ```javascript instance.interceptors.request.use(function (config) { // 在发送请求之前做些什么,例如添加token config.headers.Authorization = 'Bearer your-token'; return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); }); ``` 添加响应拦截器: ```javascript instance.interceptors.response.use(function (response) { // 对响应数据做点什么 return response; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); }); ``` 4. 使用自定义的axios实例发起请求: ```javascript instance.get('/users') .then(response => { // 处理成功的响应 console.log(response.data); }) .catch(error => { // 处理错误 console.error(error); }); ``` 自定义axios实例的好处是,可以针对不同的API或不同环境(如开发环境和生产环境)创建不同的配置,提高代码的复用性,同时也可以为特定的HTTP请求提供一些通用的配置和功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值