이번 글에서는 vue 프로젝트에서 axios를 사용하는 방법에 대해 이야기해 볼까요? 기본 사용량 공유
- 青灯夜游앞으로
- 2022-11-23 20:28:322975검색
팁: 이 글에서는 vue 프로젝트의 axios 예제를 자세히 설명합니다. Vue.js 프레임워크를 사용하여 프런트엔드 프로젝트를 개발할 때 ajax 요청이 종종 서버 인터페이스로 전송됩니다. 개발 프로세스 중에 프로젝트에서 사용하기 쉽도록 axios를 추가로 캡슐화해야 합니다. [학습 영상 공유: vue 영상 튜토리얼, 웹 프론트엔드 영상]
Axios 소개
Axios 프레임워크의 전체 이름(ajax – I/O – 시스템):
- 기반 Promise API를 사용할 수 있도록 브라우저 및
node.js용promise code>http 클라이언트
promise用于浏览器和node.js的http客户端，因此可以使用Promise API
一、axios是干啥的
说到axios我们就不得不说下Ajax。在旧浏览器页面在向服务器请求数据时，因为返回的是整个页面的数据，页面都会强制刷新一下，这对于用户来讲并不是很友好。并且我们只是需要修改页面的部分数据，但是从服务器端发送的却是整个页面的数据，十分消耗网络资源。而我们只是需要修改页面的部分数据，也希望不刷新页面，因此异步网络请求就应运而生。
Ajax(Asynchronous JavaScript and XML)：
异步网络请求。Ajax能够让页面无刷新的请求数据。
实现ajax的方式有多种，如jQuery封装的ajax，原生的XMLHttpRequest，以及axios。但各种方式都有利弊：
- 原生的XMLHttpRequest的配置和调用方式都很繁琐，实现异步请求十分麻烦
- jQuery的ajax相对于原生的ajax是非常好用的，但是没有必要因为要用ajax异步网络请求而引用jQuery框架
Axios（ajax i/o system）：
这不是一种新技术，本质上还是对原生XMLHttpRequest的封装，可用于浏览器和nodejs的HTTP客户端，只不过它是基于Promise的，符合最新的ES规范。具备以下特点：
- 在浏览器中创建XMLHttpRequest请求
- 在node.js中发送http请求
- 支持Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消要求
- 自动转换JSON数据
客户端支持防止CSRF/XSRF(跨域请求伪造)
二、安装使用
安装有三种方式：
npm安装
npm install axios
bower安装
bower install axios
通过cdn引入
<script></script>
在vue项目的main.js文件中引入axios
import axios from 'axios' Vue.prototype.$axios = axios
在组件中使用axios
<script>
export default {
mounted(){
this.$axios.get('/goods.json').then(res=>{
console.log(res.data);
})
}
}
</script>
三、Axios请求方式
- get：获取数据，请求指定的信息，返回实体对象
- post：向指定资源提交数据（例如表单提交或文件上传）
- put：更新数据，从客户端向服务器传送的数据取代指定的文档的内容
- patch：更新数据，是对put方法的补充，用来对已知资源进行局部更新
- delete：请求服务器删除指定的数据
示例代码
方法一
//请求格式类似于 http://localhost:8080/goods.json?id=1
this.$axios.get('/goods.json',{
params: {
id:1
}
}).then(res=>{
console.log(res.data);
},err=>{
console.log(err);
})
方法二
this.$axios({
method: 'get',
url: '/goods.json',
params: {
id:1
}
}).then(res=>{
console.log(res.data);
},err=>{
console.log(err);
})
post请求一般分为两种类型
1、form-data 表单提交，图片上传、文件上传时用该类型比较多
2、application/json 一般是用于 ajax 异步请求
示例代码
方法一
this.$axios.post('/url',{
id:1
}).then(res=>{
console.log(res.data);
},err=>{
console.log(err);
})
方法二
$axios({
method: 'post',
url: '/url',
data: {
id:1
}
}).then(res=>{
console.log(res.data);
},err=>{
console.log(err);
})
form-data请求
let data = {
//请求参数
}
let formdata = new FormData();
for(let key in data){
formdata.append(key,data[key]);
}
this.$axios.post('/goods.json',formdata).then(res=>{
console.log(res.data);
},err=>{
console.log(err);
})
示例代码
put请求
this.$axios.put('/url',{
id:1
}).then(res=>{
console.log(res.data);
})
patch请求
this.$axios.patch('/url',{
id:1
}).then(res=>{
console.log(res.data);
})
示例代码
参数以明文形式提交
this.$axios.delete('/url',{
params: {
id:1
}
}).then(res=>{
console.log(res.data);
})
参数以封装对象的形式提交
1. 무엇 axios 얘기가 나와서 말인데, Ajax에 대해 이야기해야 합니다. 이전 브라우저 페이지가 서버에 데이터를 요청하면 전체 페이지의 데이터가 반환되기 때문에 페이지가 강제로 새로 고쳐지므로 사용자 친화적이지 않습니다. 그리고 페이지의 데이터 중 일부만 수정하면 되지만, 페이지 전체의 데이터가 서버에서 전송되기 때문에 네트워크 리소스를 많이 소모합니다. 페이지의 일부 데이터만 수정하면 되며 페이지를 새로 고치지 않기를 바라므로 비동기 네트워크 요청이 발생합니다.
Ajax
(비동기 JavaScript 및 XML):비동기 네트워크 요청. Ajax를 사용하면 페이지를 새로 고치지 않고도 데이터를 요청할 수 있습니다.
jQuery로 캡슐화된 ajax, 네이티브 XMLHttpRequest, axios 등 Ajax를 구현하는 방법은 다양합니다. 그러나 모든 방법에는 장단점이 있습니다.
🎜네이티브 XMLHttpRequest의 구성 및 호출 방법은 매우 번거롭고 비동기 요청을 구현하는 것이 매우 번거롭습니다.🎜jQuery의 ajax는 네이티브 ajax에 비해 사용하기 매우 쉽지만 필요하지 않습니다. ajax 비동기 네트워크 요청이 사용되기 때문에 jQuery 프레임워크가 참조됩니다.🎜🎜Axios🎜(ajax i/o 시스템):이것은 새로운 기술이 아니며 본질적으로 브라우저와 nodejs에서 사용할 수 있는 HTTP 클라이언트인 네이티브 XMLHttpRequest의 캡슐화입니다. 단, Promise를 기반으로 하고 최신 ES 사양을 준수합니다. 다음 기능이 있습니다:🎜🎜🎜브라우저에서 XMLHttpRequest 요청 생성🎜node.js에서 http 요청 보내기🎜Promise API 지원🎜요청 및 응답 차단🎜변환 요청 및 응답 데이터🎜요청 취소🎜JSON 데이터 자동 변환🎜🎜CSRF/XSRF(도메인 간 요청 위조) 방지를 위한 클라이언트 지원🎜 🎜🎜🎜🎜🎜2. 설치 및 사용 🎜🎜🎜설치 방법은 3가지가 있습니다. 🎜🎜npm 설치🎜
this.$axios.delete('/url',{
data: {
id:1
}
}).then(res=>{
console.log(res.data);
})
//方法二
axios({
method: 'delete',
url: '/url',
params: { id:1 }, //以明文方式提交参数
data: { id:1 } //以封装对象方式提交参数
}).then(res=>{
console.log(res.data);
})🎜bower 설치🎜 this.$axios.all([
this.$axios.get('/goods.json'),
this.$axios.get('/classify.json')
]).then(
this.$axios.spread((goodsRes,classifyRes)=>{
console.log(goodsRes.data);
console.log(classifyRes.data);
})
)🎜cdn을 통해 소개🎜let instance = this.$axios.create({
baseURL: 'http://localhost:9090',
timeout: 2000
})
instance.get('/goods.json').then(res=>{
console.log(res.data);
})🎜main.js에 소개 vue 프로젝트 axios🎜//配置全局的超时时长 this.$axios.defaults.timeout = 2000; //配置全局的基本URL this.$axios.defaults.baseURL = 'http://localhost:8080';🎜
axios🎜let instance = this.$axios.create(); instance.defaults.timeout = 3000;🎜🎜🎜3 Axios 요청 방법을 사용하세요🎜🎜🎜🎜🎜🎜1. axios가 요청할 수 있는 메소드: 🎜🎜🎜🎜🎜get: 데이터 가져오기, 지정된 정보 요청, 엔터티 객체 반환🎜post: 지정된 리소스에 데이터 제출(예: 양식 제출 또는 file upload )🎜put: 업데이트 데이터, 클라이언트에서 서버로 전송된 데이터는 지정된 문서의 내용을 대체합니다.🎜patch: 업데이트 데이터, put 메소드를 보완하고 사용됩니다. 알려진 리소스의 부분 분석을 수행합니다. Update🎜delete: 서버에 지정된 데이터 삭제를 요청합니다.🎜🎜🎜🎜2, 요청 받기🎜🎜 🎜🎜🎜샘플 코드🎜🎜🎜
방법 1🎜this.$axios.get('/goods.json',{
timeout: 3000
}).then()🎜 방법 2🎜this.$axios.interceptors.request.use(config=>{
// 发生请求前的处理
return config
},err=>{
// 请求错误处理
return Promise.reject(err);
})
//或者用axios实例创建拦截器
let instance = $axios.create();
instance.interceptors.request.use(config=>{
return config
})🎜🎜🎜🎜3. 게시물 요청🎜🎜🎜 🎜게시물 요청은 일반적으로 두 가지 유형으로 나누어집니다🎜 🎜1. form-data 이 유형은 일반적으로 양식 제출, 이미지 업로드, 파일 업로드에 사용됩니다.2.
application/json 는 일반적으로 Ajax 비동기 요청에 사용됩니다. 🎜🎜🎜샘플 코드🎜🎜🎜 방법 1🎜this.$axios.interceptors.response.use(res=>{
//请求成功对响应数据做处理
return res //该返回对象会传到请求方法的响应对象中
},err=>{
// 响应错误处理
return Promise.reject(err);
})🎜 방법 2🎜let instance = this.$axios.interceptors.request.use(config=>{
config.headers = {
token: ''
}
return config
})
//取消拦截
this.$axios.interceptors.request.eject(instance);🎜양식 데이터 요청 🎜this.$axios.get('/url').then(res={
}).catch(err=>{
//请求拦截器和响应拦截器抛出错误时，返回的err对象会传给当前函数的err对象
console.log(err);
})🎜🎜🎜🎜4, Put 및 패치 요청🎜🎜🎜🎜🎜샘플 코드🎜🎜🎜put 요청🎜let source = this.$axios.CancelToken.source();
this.$axios.get('/goods.json',{
cancelToken: source
}).then(res=>{
console.log(res)
}).catch(err=>{
//取消请求后会执行该方法
console.log(err)
})
//取消请求，参数可选，该参数信息会发送到请求的catch中
source.cancel('取消后的信息');🎜패치 요청🎜rrreee🎜🎜🎜🎜5. 삭제 요청🎜🎜🎜🎜🎜샘플 코드🎜🎜🎜매개변수는 일반 텍스트로 제출됩니다.🎜rrreee🎜매개변수는 캡슐화된 객체 형태로 제출됩니다. >🎜rrreee🎜🎜🎜🎜🎜6. 동시 요청🎜🎜🎜🎜동시 요청: 동시에 여러 요청을 수행하고 반환 값을 균일하게 처리합니다🎜 🎜🎜샘플 코드🎜🎜 this.$axios.all([
this.$axios.get('/goods.json'),
this.$axios.get('/classify.json')
]).then(
this.$axios.spread((goodsRes,classifyRes)=>{
console.log(goodsRes.data);
console.log(classifyRes.data);
})
)
四、Axios实例
示例代码
let instance = this.$axios.create({
baseURL: 'http://localhost:9090',
timeout: 2000
})
instance.get('/goods.json').then(res=>{
console.log(res.data);
})
可以同时创建多个axios实例。
axios实例常用配置：
- baseURL 请求的域名，基本地址，类型：String
- timeout 请求超时时长，单位ms，类型：Number
- url 请求路径，类型：String
- method 请求方法，类型：String
- headers 设置请求头，类型：Object
- params 请求参数，将参数拼接在URL上，类型：Object
- data 请求参数，将参数放到请求体中，类型：Object
示例代码
//配置全局的超时时长 this.$axios.defaults.timeout = 2000; //配置全局的基本URL this.$axios.defaults.baseURL = 'http://localhost:8080';
示例代码
let instance = this.$axios.create(); instance.defaults.timeout = 3000;
示例代码
this.$axios.get('/goods.json',{
timeout: 3000
}).then()
以上配置的优先级为：请求配置 > 实例配置 > 全局配置
五、拦截器
拦截器：在请求或响应被处理前拦截它们
示例代码
this.$axios.interceptors.request.use(config=>{
// 发生请求前的处理
return config
},err=>{
// 请求错误处理
return Promise.reject(err);
})
//或者用axios实例创建拦截器
let instance = $axios.create();
instance.interceptors.request.use(config=>{
return config
})
示例代码
this.$axios.interceptors.response.use(res=>{
//请求成功对响应数据做处理
return res //该返回对象会传到请求方法的响应对象中
},err=>{
// 响应错误处理
return Promise.reject(err);
})
示例代码
let instance = this.$axios.interceptors.request.use(config=>{
config.headers = {
token: ''
}
return config
})
//取消拦截
this.$axios.interceptors.request.eject(instance);
六、错误处理
示例代码
this.$axios.get('/url').then(res={
}).catch(err=>{
//请求拦截器和响应拦截器抛出错误时，返回的err对象会传给当前函数的err对象
console.log(err);
})
七、取消请求
示例代码
let source = this.$axios.CancelToken.source();
this.$axios.get('/goods.json',{
cancelToken: source
}).then(res=>{
console.log(res)
}).catch(err=>{
//取消请求后会执行该方法
console.log(err)
})
//取消请求，参数可选，该参数信息会发送到请求的catch中
source.cancel('取消后的信息');
위 내용은 이번 글에서는 vue 프로젝트에서 axios를 사용하는 방법에 대해 이야기해 볼까요? 기본 사용량 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제