vue_axios详解

axios是一个基于promise的HTTP库，Chrome、Firefox、Safari、Opera、Edge、IE8+都支持1.APIaxios(config)axios(url,[config])2.config配置对象axios({method:'get',//post、get、put……baseURL:'',//请求的域名，基本地址url: '',//请求的路径params:{},//会

桃花扇J

1932人浏览 · 2020-11-17 16:21:48

桃花扇J · 2020-11-17 16:21:48 发布

axios是一个基于promise的HTTP库，Chrome、Firefox、Safari、Opera、Edge、IE8+都支持

1.API

axios(config)
axios(url,[config])

2.config配置对象

axios({
    method:'get',    //post、get、put……
    baseURL:'',     //请求的域名，基本地址
    url: '',    //请求的路径
    params:{},   //会将请求的参数拼接在url上
    data:{},    //会将请求的参数放在请求体中
    header:{},  //设置请求头，例如设置token等
    timeout:1000,   //设置请求超时时长，单位：ms
})

3.方法别名

为方便起见，为所有支持的请求方法提供了别名

axios.request(config)
axios.get(url,[config])
axios.post(url,[data],[config])
axios.delete(url,[config])
axios.head(url,[config])
axios.put(url,[data],[config])
axios.patch(url,[data],[config])
axios.options(url,[config])

【例】下面用post和put方法发送ajax请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
    <script src="./vue.js"></script>
    <script src="./axios.js"></script>
</head>
<body>
    <div id="app">
        <div class="username">
            <input type="text" placeholder="用户名" v-model='name'>
        </div>
        <div class="mail">
            <input type="text" placeholder="邮箱" v-model='mail'>
        </div>
        <div class="upload-btn" @click='upload'>上传</div>
        <div class="show-btn" @click='show'>显示人物信息</div>
        <ul class="person-list" v-for='person in personList'>
            <li class="person">
                <span>
                    {{ person.name }}
                </span>
                <span>
                    {{ person.mail }}
                </span>
            </li>
        </ul>
    </div>
</body>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            name: '',
            mail: '',
            personList: []
        },
        methods: {
            upload() {
                const { name, mail } = this
        axios.post('/setUserInfo', { name, mail }, {
            baseURL: 'https://developer.duyiedu.com/vue'
        }).then(res => {
            console.log(res)
            alert(res.data.msg)
        }).catch(error => {
            alert(error.data.msg)
        })
            },
            show() {
                axios.get('/getUserInfo', {
                    baseURL: 'https://developer.duyiedu.com/vue'
                }).then(res => {
                    this.personList = res.data.data.slice(0, 10)
                })
            }
        }
    })
</script>
</html>

4.配置默认值

可以指定将被用在各个请求的配置默认值

5.全局配置

在实际项目中，很少用到全局配置

axios.defaults.baseURL = 'https://developer.duyiedu.com/vue';
axios.defaults.timeout = 1000;

6.实例配置

可以使用自定义配置新建一个axios实例

const instance = axios.create({
  baseURL: 'https://developer.duyiedu.com/vue',
  timeout: 1000,
})

instance.get('/getUserInfo').then(res => {
  // ...
})

7.请求配置

const instance = axios.create();
instance.get('/getUserInfo', {
  timeout: 5000
})

【注】配置的优先顺序：全局<实例<请求

8.并发

同时进行多个请求，并统一处理返回值

axios.all(iterable)
axios.spread(callback)

axios.all([
  axios.get('/a'),
  axios.get('/b')
]).then(axios.spread((aRes, bRes) => {
  console.log(aRes, bRes);
}))

9.拦截器

interceptors，在发起请求之前做一些处理，或者在响应回来之后做一些处理

1）请求拦截器

axios.interceptors.request.use(config=>{
    //在发送请求之前做些什么
    return config
})

2）响应拦截器

axios.interceptors.response.use(response => {
    //对响应数据做点什么 
    return response
})

3）移除拦截器

const interceptor = axios.interceptors.response.use(response => {
    return response
})
axios.interceptors.response.eject(interceptor)

4）为axios实例添加拦截器

const instance = axios.create();
instance.interceptors.request.use(config => {
    
})

10.取消请求

const source = axios.CancelToken;
const source = CancelToken.source();

axios.get('/getUserInfo', {
  cancelToken: source.token
}).then(res => {
  console.log(res);
}).catch(error => {
  if(axios.isCancel(error)) {
    // 取消请求
    console.log(error.message);
  } else {
    // 处理错误
  }
})

// 取消请求 参数 可选
source.cancel('取消请求');

11.错误处理

request / response 是 error 的上下文，标志着请求发送 / 得到响应。在错误中，如果响应有值，则说明是响应时出现了错误；如果响应没值，则说明是请求时出现了错误；在错误中，如果请求无值，则说明请求未发送出去，如取消请求。

在实际开发过程中，一般在拦截器中统一添加错误处理。请求拦截器中的错误，会当请求未成功发出时执行，但是要注意的是：取消请求后，请求拦截器的错误函数也不会执行，因为取消请求不会抛出异常，axios对其进行了单独的处理。在更多的情况下，我们会在响应拦截器中处理错误。

12.axios预检

当axios的请求为非简单请求时，浏览器会进行预检，及发送OPTIONS请求。请求到服务器，询问是否允许跨域。如果响应中允许预检中请求的跨域行为，则浏览器会进行真正的请求，否则会报405错误

CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

嵌入式作业（七）：基于Ardunio的STM32串口通信

嵌入式作业（七）0作业要求1Ardunio 完成STM32的串口通信（1）安装Ardunio IDE（2）stm32串口通信2关于 stduino IDE0作业要求安装 Ardunio IDE 和相关软件支持库，在Ardunio 完成STM32板子的串口通信程序：（1）持续向串口输出“Hello world！”；（2）当接收到“stop!”时，停止输出。网上有一个国人版的MCU集成开发平台， st

CSDN学习社区

JDBC详解

JDBC文章目录JDBC什么是JDBC?JDBC驱动程序:Java使用JDBC访问数据库的步骤:设置classpath:Oracle连接字符串的书写格式:简单的例子:常用数据库的驱动程序及JDBC URL:Oracle数据库:SQL Server数据库MySQL数据库Access数据库PreparedStatement接口:JNDI-数据源（Data Source）与连接池（Connection

CSDN学习社区

“模式识别与机器学习”学习笔记no2.再谈感知机

接**上篇：上篇主要进行了PLA，Pocket算法的理论过程分析和在给定数据集上利用pocket算法对数据集进行分类学习，得到错分数量最少的分类面。上篇中pocket算法的过程已经进行了编程和测试，框架已经建立了起来，这一篇主要上篇中没有提到或涉及不深的几个问题。1.数据集的构造。上篇是直接使用了题目给的向量，这次来根据正态分布来产生数据集。np.random.normal函数可以根据均值和方差生