关键词

请求 数据

Vue.js3.0中如何请求后端数据

Vue.js3.0中请求后端数据

Vue.js3.0中请求后端数据有多种方式,其中最常用的是使用axios库,它是一个基于Promise的HTTP客户端,可以发送请求到后端服务器,并且拿到响应结果。

安装axios

在Vue.js中使用axios,需要安装它,可以使用npm安装:

npm install axios

发送get请求

在Vue.js中使用axios发送get请求,需要先引入axios:

import axios from 'axios'

就可以发送get请求了,发送get请求的代码如下:

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

发送post请求

在Vue.js中使用axios发送post请求,和发送get请求类似,只需要把get改为post即可:

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

发送请求时带上头部信息

如果需要发送请求时带上头部信息,可以使用axios中的headers参数:

axios.get('/user', {
    headers: {
        'Authorization': 'Bearer token'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

发送请求时携带参数

如果需要发送请求时携带参数,可以使用axios中的params参数:

axios.get('/user', {
    params: {
        ID: 12345
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

发送请求时携带数据

如果需要发送请求时携带数据,可以使用axios中的data参数:

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
}, {
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

发送请求时设置超时时间

如果需要发送请求时设置超时时间,可以使用axios中的timeout参数:

axios.get('/user', {
    timeout: 1000
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

使用axios拦截器

axios提供了拦截器的功能,可以在发送请求之前和接收到响应之后做一些处理,比如设置请求头、添加请求参数等,使用axios拦截器的代码如下:

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

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

以上就是Vue.js3.0中请求后端数据的方法,主要是使用axios库发送请求,可以发送get、post请求,并且可以携带参数、头部信息、设置超时时间等,还可以使用axios拦截器做一些处理。

本文链接:http://task.lmcjl.com/news/13382.html

展开阅读全文