react axios 配置（react配置less）

25-02-04 19

对于reactaxios配置感兴趣的读者，本文将提供您所需要的所有信息，我们将详细讲解react配置less，并且为您提供关于Axios-React原生PUT请求、axios与axios.create

对于react axios 配置感兴趣的读者，本文将提供您所需要的所有信息，我们将详细讲解react配置less，并且为您提供关于Axios-React 原生 PUT 请求、axios与axios.create()的区别、axios从无从下手到手到擒来(5)-源码分析之默认axios与axios.create()的区别、axios网络请求基本使用、配置使用(全局axios和局部axios实例)、模块封装、axios拦截器的宝贵知识。

本文目录一览：

react axios 配置（react配置less）
Axios-React 原生 PUT 请求
axios与axios.create()的区别
axios从无从下手到手到擒来(5)-源码分析之默认axios与axios.create()的区别
axios网络请求基本使用、配置使用(全局axios和局部axios实例)、模块封装、axios拦截器

react axios 配置（react配置less）

1：package.json 添加

"proxy": "代理地址"

2 封装axios

创建server.js 添加

import axios from "axios";

import qs from "qs";

import axios from "axios";

import qs from "qs";

//终止axios的fun

let axiosToken = null;

//请求超时时间

//axios.defaults.timeout = 10000;

// axios拦截器

axios.interceptors.request.use(

config => {

// 在发送请求之前做些什么

return config;

err => {

return Promise.reject(err);

}

);

axios.interceptors.response.use(

response => {

//请求完成token置空

axiosToken = null;

return response;

error => {

//请求完成token置空

axiosToken = null;

//提示信息

if (axios.isCancel(error)) alert(error.message, "center");

else alert("请稍后再试...", "center");

return Promise.reject(error.response.data); // 返回接口返回的错误信息

}

);

class HttpRequest {

get(httpUrl, paramsData, successFun, errorFun) {

axios

.get(httpUrl, paramsData)

.then(function(res) {

successFun(res);

})

.catch(function(err) {

console.log("请求失败！ " + err);

});

}

// post请求

post(httpUrl, paramsData, successFun, errorFun) {

let paramsDatas = paramsData;

//转为json

paramsDatas = qs.stringify(paramsDatas);

axios

.post(httpUrl, paramsDatas, {

//终止请求

cancelToken: new axios.CancelToken(function executor(c) {

axiosToken = c;

})

.then(res => {

successFun(res);

})

.catch(err => {

console.log(err);

});

}

//终止请求

doCancelToken(msg = "取消") {

if (axiosToken) axiosToken(msg);

}

export default new HttpRequest();

3 引入使用就可以了

Axios-React 原生 PUT 请求

如何解决Axios-React 原生 PUT 请求？

我想发送一个 put 请求来修改文件的标题，但我不断收到 400 个错误的请求错误，我不确定如何制定我的请求以便它被接受。这是请求：

const onPressSaveName=()=>{
  handleEditedItem(fileTitle);
  const modefiedFile=new FormData();
  modefiedFile.append(''label'',label)
  modefiedFile.append(''file'',{
    uri: fileUri
     });
  modefiedFile.append(''title'',inputText)
  
  const headers={
    Accept:''application/json'',''Content-Type'':''application/json'',}
   const json=JSON.stringify(modefiedFile);
   axios
   .put(`http://192.168.1.17:8000/File/${key}/`,json,{headers:headers})
   .then((response)=> {response.json()})
   .then((error)=>{console.log(error)})       
          
  setModal(false)
}

这是我的 Django 后端视图：

elif request.method ==''PUT'':
        serializer=Fileserializers(data=request.data)
        if serializer.is_valid():
           serializer.save()
           return JsonResponse(serializer.data)
        return JsonResponse(serializer.errors,status=404)

解决方法

为了帮助面临同样错误的人，只需确保您拥有正确的内容类型和正确的方式来发送文件，就我而言，此修改有效：

 modefiedFile.append(''file'',{
    uri:  fileUri,name: fileTitle,type: ''file/pdf''})
  modefiedFile.append(''title'',inputText)
  
  const headers={
    Accept:''application/json'',''Content-Type'': ''multipart/form-data''
    }

axios与axios.create()的区别

参考原文：https://www.cnblogs.com/fsg6/...

axios.create()是添加了自定义配置的新的axios

例如：
用axios发送请求：

axios({
    method:''POST'',
    url:''http://localhost:8000/login'',
    data
})

用axios.create()创建一个新的axios发请求：

cosnt requset = axios.create({
    //基础路径
    baseURL:''http://localhost:8000/''
})

requset({
    method:''POST'',
    url:''/login'',
    data
})

好处：、
1.可以简化路径写法
2.当基础路径发生变化时方便修改，有利于维护

axios从无从下手到手到擒来(5)-源码分析之默认axios与axios.create()的区别

上文说到默认暴露的axios是通过createInstance函数创建的.在开发中,除了使用axios之外,我们还可以使用axios.create()创建新的Axios instance,那么,这两个对象都有啥区别呢?
首先,贴出源码

// Create the default instance to be exported
var axios = createInstance(defaults);

// Expose Axios class to allow class inheritance
axios.Axios = Axios;

// Factory for creating new instances
axios.create = function create(instanceConfig) {
  return createInstance(mergeConfig(axios.defaults, instanceConfig));
};

// Expose Cancel & CancelToken
axios.Cancel = require(''./cancel/Cancel'');
axios.CancelToken = require(''./cancel/CancelToken'');
axios.isCancel = require(''./cancel/isCancel'');

// Expose all/spread
axios.all = function all(promises) {
  return Promise.all(promises);
};
axios.spread = require(''./helpers/spread'');

可以确定的是,axios是Axios库调用createInstance()默认帮我创建的一个对象,而instance是我们手动调用create函数创建的Axios对象,create函数中调用的也是createInstance函数,
mergeConfig()的定义:''function mergeConfig(config1, config2) {}'',生成一个新的配置对象,如果config1中和config2中的属性冲突,优先config2中的定义
相同点:

它俩都是能发送请求的函数,也就是Axios.prototype.request([config])函数
它俩都拥有Axios原型对象上的各种发送特定请求的方法,get/post/put/delete...
它们拥有各自的默认配置和拦截器配置

不同点:

默认配置很可能不一样,项目中使用axios.create()创建一个新axios,就是为了区别与默认的axios的不同,如果传入相同的config,是不是显得很多余?
在源码中,create函数定义之后,又对默认的axios添加了很多属性,如Cancel,CancelToken,all等.所以可以肯定的是,create()出来的instance绝对没有这些后添加的属性

axios系列传送门

axios从无从下手到手到擒来(1)-使用XMLHttpRequest封装简单的ajax请求函数
axios从无从下手到手到擒来(2)-axios的理解与使用
axios从无从下手到手到擒来(3)-源码分析之整体结构
axios从无从下手到手到擒来(4)-源码分析之axios与Axios的关系
axios从无从下手到手到擒来(5)-源码分析之默认axios与axios.create()的区别
axios从无从下手到手到擒来(6)-源码分析之axios运行的整体流程

axios网络请求基本使用、配置使用(全局axios和局部axios实例)、模块封装、axios拦截器

vue入门–基础命令+axios+案例练习

vue入门–vue常用属性、生命周期、计算属性、过滤器、组件、虚拟DOM、数组的响应式方法、页面闪烁、ES6简单语法增强

vue入门–js高阶函数(箭头函数)、v-model数据绑定、组件化、父子组件通信及访问

vue入门–插槽(具名、匿名、作用域插槽)+ES6模块化导入导出+webpack的使用(基本使用+配置使用+如何一步步演化成cli脚手架)+webpack插件使用(搭建本地服务器、配置文件分离)

vue-cli脚手架2版本及3+版本安装、目录解析、only和compiler的区别、3+版本如何改配置、箭头函数及this的指向

vue-router基本使用、路由传参、懒加载、嵌套路由、导航守卫、keep-alive

Promise基本使用、三种状态、链式调用及简写、all方法

Vuex的作用、使用、核心概念(State、Mutations、Getters、Actions、Modules)、文件抽离

axios网络请求基本使用、配置使用(全局axios和局部axios实例)、模块封装、axios拦截器

网络模块封装

Vue中发送网络请求的方式很多，如何选择？

原生Ajax : 基于XMLHttpRequest，好解释，但是配置和调用方式混乱，编码看起来头疼
jquery-ajax : 经常使用，但是在Vue中已经不再是使用Jquery了，没必要再为了ajax引入jquery，而且jquery也是重量级的
axios: 用起来方便，支持多功能：在nodejs中发送http请求，支持Promise，拦截请求和响应、转换请求和响应等

axios基本使用

支持多种请求方式：

在这里插入图片描述

安装axios框架

npm install axios --save

引入

import axios from 'axios'

普通使用

axios(config)，config就是发送请求的一些配置，比如请求方式(默认是GET请求)

B站教程-why老师的教程，还提供了相关的接口数据，可参考。

axios.config({
  url: 'http://xxx.xxx.xxx/home/multidata'
}).then(res => {
  console.log(res)
})

查看返回数据

在这里插入图片描述

返回的是一个object对象，然后内部由config、data(返回的数据)、headers等数据

在不设置请求方式时，默认就是Get方式请求，我们也可以在config中指定请求的方式：

axios.config({
  url: 'http://xxx.xxx.xxx/home/multidata',
  method: 'GET'
}).then(res => {
  console.log(res)
})

Get请求

axios.get()

get(url: string, config?: AxiosRequestConfig<any> | undefined): Promise<AxiosResponse<any, any>>

需要两个参数，一个请求的url，还有一个请求的config信息，config不是必填的

axios.get('http://xxx.xxx.xxx/home/multidata')
.then(res => {
  console.log(res)
})

假如有参数，如 http://xxx.xxx.xxx/base/list?type=a&page=1，怎么传递呢

axios.get('http://xxx.xxx.xxx/home/data',
{
  params:{
    type: 'pop',
    page: 1
  }
}).then(res => {
  console.log(res)
})

直接在接收的第二个参数config对象中定义 params即可。最后请求时会自动把这些参数通过问号拼接在请求的url上面。

发送并发请求

使用axios的all()方法，接收一个数组参数

axios.all([
  axios({
    url: 'http://xxx.xxx.xxx.xxx/home/multidata'
  }),
  axios({
    url: 'http://xxx.xxx.xxx.xxx/home/data',
    params:{
      type: 'aaa',
      page: 2
    }
  })
]).then(results => {
    console.log(results[0])
    console.log(results[1])
})

在这里插入图片描述

all()方法中定义了两个axios的网络请求，当两个网络请求(异步操作)完毕后，进入到then()方法中处理数据。

then()中results是获取的两个结果加在一起的数组对象，太麻烦了，能否单独获取到这两个请求各自的得到的结果呢？

axios提供了一个spread的方法，可以将数组 [res1,res2]展开为 res1,res2

axios.all([
  axios({
    url: 'http://xxx.xxx.xxx.xxx/home/multidata'
  }),
      page: 2
    }
  })
]).then(axios.spread((res1, res2) => {
  console.log(res1)
  console.log(res2)
}))

在这里插入图片描述

axios配置

@L_301_25@全局配置

事实上，在开发中可能很多的参数都是固定的，这个时候我们可以进行一些抽取，也可以利用axios的全局配置

设置后全局性生效，如请求的地址会变成 baseURL+url的拼接值，请求的超时时间为5s，超时后报错

axios.defaults.baseURL = 'http://xxx.xxx.xxx.xxx'
// 单位是毫秒
axios.defaults.timeout = 5000

axios({
  url: '/home/multidata'
}).then(res =>{
  console.log(res)
})

axios常见的配置选项

url : 请求地址
method : 请求类型
baseURL : 请求根路径
transformRequest : 请求前的数据处理
transformResponse : 请求后的数据处理
headers : 自定义请求头
params : URL数据拼接适用于GET请求
data : request body(请求体，一般放数据)适用于POST请求
responseType: ‘json’，响应的数据格式

axios实例和模块封装

使用axios实例

前面我们都是使用的全局的axios对象。而开发中，假如有多个服务器，那么使用全局的axios配置的话实现起来也比较麻烦。我们可以创建axios(局部)的实例。

// 创建一个axios的局部实例，并且设置好了配置
const in1 = axios.create({
  baseURL: 'http://xxx.xxx.xxx.xxx',
  timeout: 5000
})

// 使用axios实例
in1({
  url: '/home/multidata'
}).then(res => {
  console.log(res)
})

// 使用axios实例
in1({
  url: '/home/data',
  params:{
    type: 'pop',
    page: 1
  }
}).then(res => {
  console.log(res)
})

封装axios

开发中，不要每个组件都使用import axios form 'axios'的方式，代码复用性太差，而且后期如果更换组件，维护起来过于麻烦。我们可以封装到一个文件中，然后其他组件直接可以使用即可。

如何封装？

可以在src下创建一个network的目录，涉及到网络相关的东西，都放入到这个目录中。

封装一个request组件，考虑一个问题，因为封装好的request，其他模块都要去调用，所以我们网络请求获取到数据后的处理应该去交给调用者来处理，而不是在request组件中处理。

要实现也有很多的方式：

调用封装好request时，需要我们传入一个success和fail的回调（了解即可）

封装一个request

import axios from 'axios'
export function req(config, success, fail) {
    const instance = axios.create({
        baseURL: 'http://xxx.xxx.xxx.xxx',
        timeout: 5000
    })
	
    // 使用axios的实例，并且调用响应的 回调
    instance(config)
    .then(res => {
        success(res);
    }).catch(err => {
        fail(err)
    })
}

调用者如何使用呢？

以App.vue组件为例，在App组件创建完毕后进行网络请求数据，然后回显

<template>
  <div id="app">
    <p>{{result}}</p>
  </div>
</template>
<script>
import { req } from './network/request'
export default {
  name: 'App',
  data() {
    return {
      result: ''
    }
  },
  created() {
    req({
      url: '/home/multidata'	// 请求地址
    },succ =>{		// 处理成功回调
      this.result = succ
    },err => {		// 失败回调
      console.log(err)
    })
  }
}
</script>
<style>
</style>

在这里插入图片描述

(思路理清) 使用Promise

封装request

import axios from 'axios'
export function req(config) {
    return new Promise((resolve, reject) => {
        const instance = axios.create({
            baseURL: 'http://xxx.xxx.xxx.xxx',
            timeout: 5000
        })
        // 使用axios实例
        instance(config).then(res => {	// 成功时
            resolve(res)
        }).catch(err => {	// 失败时
            reject(err)
        })
    })
}

调用者调用

created() {
    req({
        url: '/home/multidata'
    }).then(res => {
        this.result = res
    }).catch(err =>{
        console.log(err)
    })
}

最终方案(使用Promise)

上面的方案其实就是给返回一个Promise的实例，方便调用者实现回调，但是其实创建axios的实例后，调用axios实例时返回值是一个 Promise的类型，所以我们直接return这个axios的调用就行了.

在这里插入图片描述

import axios from 'axios'
export function req(config) {
    const instance = axios.create({
        baseURL: 'http://xxx.xxx.xxx.xxx',
        timeout: 5000
    })
    return instance(config)
}

调用

created() {
    req({
        url: '/home/multidata'
    }).then(res => {
        this.result = res
    }).catch(err =>{
        console.log(err)
    })
}

axios拦截器

axios提供了拦截器，用于我们在每次发送请求或者得到结果后，进行响应的处理。可使用4中机制的拦截:

请求成功
请求失败
响应成功
响应失败

如何使用?

// 全局的
axios.interceptors

// 单个实例的
axios实例.interceptors

请求拦截

以我们上面封装的request组件为例

import axios from 'axios'
export function req(config) {
    const instance = axios.create({
        baseURL: 'http://xxx.xxx.xxx.xxx',
        timeout: 5000
    })
    instance.interceptors.request.use(config => {
        console.log(config)
    }, err => {
        console.log(err)
    })

    return instance(config)
}

看控制台信息

在这里插入图片描述

可以看到发送请求前，拦截到了并且获取到了信息，有baseURL,headers等等，但是下面有个报错，为啥呢？

注意看下面的代码，我们对request进行了拦截，并且获取到了信息，但是我们没有把信息重新给 return 回去，那么这个请求的config信息都获取不到了，直接报错了，我们必须要return 回去信息.

instance.interceptors.request.use(config => {
    console.log(config)
}, err => {
    console.log(err)
})

正确做法：

instance.interceptors.request.use(config => {
    console.log(config)
    return config
}, err => {
    console.log(err)
})

`那么拦截器有什么作用呢？`

假如有某个需求，每次发送请求时都要去对headers中的一些信息进行校验或者更改，我们就需要使用到拦截器，然后对拦截到的信息做一些更改，再return 给这个请求。
```
instance.interceptors.request.use(config => {
    console.log(config)
    config.headers = {
        xxx: 'xxx'
    }
    return config
}, err => {
    console.log(err)
})
```

每次发送请求时，让页面上显示一个加载的小动画，当请求成功后，再给他隐藏掉

import axios from 'axios'
export function req(config) {
    const instance = axios.create({
        baseURL: 'http://xxx.xxx.xxx.xxx',
        timeout: 5000
    })
    instance.interceptors.request.use(config => {
        console.log(config)
        // 展示加载的动画
        return config
    }, err => {
        console.log(err)
    })
    // 执行到这里，隐藏动画
    return instance(config)
}

某些网络请求，必须携带一个特殊信息，比如token

import axios from 'axios'
export function req(config) {
    const instance = axios.create({
        baseURL: 'http://xxx.xxx.xxx.xxx',
        timeout: 5000
    })
    instance.interceptors.request.use(config => {
        console.log(config)
        if(config.headers.token == null) {
            // 告诉用户先登录 (处理)
        }
        return config
    }, err => {
        console.log(err)
    })
    return instance(config)
}

响应拦截

和请求拦截类似，不过拦截的机制不同，响应拦截是发送网络请求后，进行的拦截

import axios from 'axios'
export function req(config) {
    const instance = axios.create({
        baseURL: 'http://xxx.xxx.xxx.xxx',
        timeout: 5000
    })
    instance.interceptors.response.use(result => {
        console.log(result)
        return result
    }, err => {
        console.log(err)
    })
    return instance(config)
}

在这里插入图片描述

一般情况下，我们只需要拿到响应的data就行了。

和请求拦截一样，需要注意的是：拦截到数据后，一定要将返回的信息 return 给接收者，否则接收者获取到的数据都是 undefind，需要什么返回什么就行，如只需要响应的数据，那就把data给返回即可

instance.interceptors.response.use(result => {
    console.log(result)
    return result.data
}, err => {
    console.log(err)
})

vue入门–基础命令+axios+案例练习

vue入门–vue常用属性、生命周期、计算属性、过滤器、组件、虚拟DOM、数组的响应式方法、页面闪烁、ES6简单语法增强

vue入门–js高阶函数(箭头函数)、v-model数据绑定、组件化、父子组件通信及访问

vue入门–插槽(具名、匿名、作用域插槽)+ES6模块化导入导出+webpack的使用(基本使用+配置使用+如何一步步演化成cli脚手架)+webpack插件使用(搭建本地服务器、配置文件分离)

vue-cli脚手架2版本及3+版本安装、目录解析、only和compiler的区别、3+版本如何改配置、箭头函数及this的指向

vue-router基本使用、路由传参、懒加载、嵌套路由、导航守卫、keep-alive

Promise基本使用、三种状态、链式调用及简写、all方法

Vuex的作用、使用、核心概念(State、Mutations、Getters、Actions、Modules)、文件抽离

axios网络请求基本使用、配置使用(全局axios和局部axios实例)、模块封装、axios拦截器

关于react axios 配置和react配置less的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于Axios-React 原生 PUT 请求、axios与axios.create()的区别、axios从无从下手到手到擒来(5)-源码分析之默认axios与axios.create()的区别、axios网络请求基本使用、配置使用(全局axios和局部axios实例)、模块封装、axios拦截器等相关知识的信息别忘了在本站进行查找喔。

本文标签：