vue의 axios는 무엇을 합니까?
- 青灯夜游원래의
- 2022-03-03 17:29:036305검색
vue에서 axios는 주로 AJAX 비동기 통신 기능을 구현하는 데 사용되는 약속 기반 HTTP 라이브러리입니다. axios는 브라우저에서 XMLHttpRequests 요청을 보내고 nodejs에서 http 요청을 보낼 수 있으며 요청과 응답을 가로채고 요청 및 응답 데이터.
이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.
axios: 프론트엔드 통신 프레임워크는 vue의 경계가 매우 명확하기 때문에 DOM을 처리하는 것이므로 통신 기능이 없습니다. 이때 vue와 상호 작용하려면 추가 통신 프레임워크를 사용해야 합니다. 물론 jQuery에서 제공하는 AJAX 통신 기능을 사용할 수도 있습니다.
Axios는 약속 기반 HTTP 라이브러리입니다. 간단히 말해 get 및 post 요청을 보낼 수 있습니다.
get과 post에 관해 말하면, 모두가 가장 먼저 생각해야 할 것은 Jquery입니다. 몇 년 전 Jquery가 꽤 인기가 있었을 때는 모두가 Jquery를 사용하고 있었습니다. 하지만 Vue, React 등의 프레임워크의 등장으로 인해 Jquery는 그다지 인기가 없습니다. Axios 경량 라이브러리의 출현을 촉발한 것도 Vue 및 React와 같은 프레임워크의 등장입니다. Vue 등은 Dom을 운영할 필요가 없기 때문에 Jquery.js를 도입할 필요가 없습니다.
Axios 기능
1. 브라우저에서 XMLHttpRequest를 보낼 수 있습니다
2. Promise API
4에서 HTTP 요청을 보낼 수 있습니다. 요청 데이터 및 응답 데이터
6. 요청을 취소할 수 있습니다
7. JSON 데이터를 자동으로 변환합니다
8. 클라이언트는 XSRF 공격으로부터 보호를 지원합니다
Axios는 어떤 경우에 사용되나요?기능에서 언급했듯이 Axios는 브라우저가 요청을 보내거나 Node.js가 요청을 보낼 때 사용할 수 있습니다. Vue, React, Node 등의 프로젝트에서는 Axios를 사용할 수 있습니다. 프로젝트에서 Jquery를 사용하는 경우 현재는 jquery 자체에서 요청을 보낼 수 있으므로 추가 작업을 수행할 필요가 없습니다.
Axios를 어떻게 사용하나요?
모듈 설치npm install axios
또는 직접 소개
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
모듈 소개 후 바로 사용 가능
예(1)// GET
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// POST
axios.post('/user', {
name: 'Javan',
website: 'www.javanx.cn'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});위 매개변수는 선택 사항여러 개를 동시에 전송하려는 경우 아래 코드를 보면 됩니다
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// 两个请求都执行完成才会执行
}));예제 (2)
위 방법 외에도 다음과 같은 관련 구성을 axios에 전달하여 요청을 생성할 수 있습니다. // POST
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});Syntax
axios(url[, config])config
{
// `url` 是用于请求的服务器 URL
url: '/user',
// `method` 是创建请求时使用的方法
method: 'get', // 默认是 get
// `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
// 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
baseURL: 'https://some-domain.com/api/',
// `transformRequest` 允许在向服务器发送前，修改请求数据
// 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
// 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
transformRequest: [function (data) {
// 对 data 进行任意转换处理
return data;
}],
// `transformResponse` 在传递给 then/catch 前，允许修改响应数据
transformResponse: [function (data) {
// 对 data 进行任意转换处理
return data;
}],
// `headers` 是即将被发送的自定义请求头
headers: {'X-Requested-With': 'XMLHttpRequest'},
// `params` 是即将与请求一起发送的 URL 参数
// 必须是一个无格式对象(plain object)或 URLSearchParams 对象
params: {
ID: 12345
},
// `paramsSerializer` 是一个负责 `params` 序列化的函数
// (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
paramsSerializer: function(params) {
return Qs.stringify(params, {arrayFormat: 'brackets'})
},
// `data` 是作为请求主体被发送的数据
// 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
// 在没有设置 `transformRequest` 时，必须是以下类型之一：
// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
// - 浏览器专属：FormData, File, Blob
// - Node 专属： Stream
data: {
firstName: 'Fred'
},
// `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
// 如果请求话费了超过 `timeout` 的时间，请求将被中断
timeout: 1000,
// `withCredentials` 表示跨域请求时是否需要使用凭证
withCredentials: false, // 默认的
// `adapter` 允许自定义处理请求，以使测试更轻松
// 返回一个 promise 并应用一个有效的响应 (查阅 [response docs](#response-api)).
adapter: function (config) {
/* ... */
},
// `auth` 表示应该使用 HTTP 基础验证，并提供凭据
// 这将设置一个 `Authorization` 头，覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
auth: {
username: 'janedoe',
password: 's00pers3cret'
},
// `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
responseType: 'json', // 默认的
// `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称
xsrfCookieName: 'XSRF-TOKEN', // default
// `xsrfHeaderName` 是承载 xsrf token 的值的 HTTP 头的名称
xsrfHeaderName: 'X-XSRF-TOKEN', // 默认的
// `onUploadProgress` 允许为上传处理进度事件
onUploadProgress: function (progressEvent) {
// 对原生进度事件的处理
},
// `onDownloadProgress` 允许为下载处理进度事件
onDownloadProgress: function (progressEvent) {
// 对原生进度事件的处理
},
// `maxContentLength` 定义允许的响应内容的最大尺寸
maxContentLength: 2000,
// `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，promise 将被 resolve; 否则，promise 将被 rejecte
validateStatus: function (status) {
return status >= 200 && status < 300; // 默认的
},
// `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目
// 如果设置为0，将不会 follow 任何重定向
maxRedirects: 5, // 默认的
// `httpAgent` 和 `httpsAgent` 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理。允许像这样配置选项：
// `keepAlive` 默认没有启用
httpAgent: new http.Agent({ keepAlive: true }),
httpsAgent: new https.Agent({ keepAlive: true }),
// 'proxy' 定义代理服务器的主机名称和端口
// `auth` 表示 HTTP 基础验证应当用于连接代理，并提供凭据
// 这将会设置一个 `Proxy-Authorization` 头，覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。
proxy: {
host: '127.0.0.1',
port: 9000,
auth: : {
username: 'mikeymike',
password: 'rapunz3l'
}
},
// `cancelToken` 指定用于取消请求的 cancel token
// （查看后面的 Cancellation 这节了解更多）
cancelToken: new CancelToken(function (cancel) {
})
}예제( 3)
또한 사용자 정의 구성을 사용하여 새 Axios 인스턴스를 생성하고 요청이나 응답이 처리되기 전에 가로채거나 잡을 수도 있습니다. // 如文件名叫http.js
import axios from 'axios'
// 创建实例时设置配置的默认值
var instance = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
/**
1、比如添加token之类的请求头信息
2、添加每次请求loading等
*/
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
// 对响应数据做点什么
/**
1、集中处理响应数据（如错误码处理）
*/
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
export default instance위의 http.js를 어떻게 사용하나요???
import http from 'xxx/http'
http({
method: 'POST',
url: '/user',
data: {
name: 'Javan',
website: 'www.javanx.cn'
}
}).then((response) => {
// 200响应
}, (err) => {
// 500响应
})예(4)
인터페이스를 취소하는 방법은 무엇인가요? ? ? 시나리오: 문자를 입력할 때마다 인터페이스가 호출됩니다. 이때 마지막으로 어떤 인터페이스 데이터가 반환되는지 알 수 있는 방법은 동일한 인터페이스를 취소하는 것입니다. 이전에는 취소 인터페이스가 있습니다.
var CancelToken = axios.CancelToken;
var source = CancelToken.source();
axios.get('/user/12345', {
cancelToken: source.token
}).catch(function(thrown) {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// 处理错误
}
});
// 取消请求（message 参数是可选的）
source.cancel('Operation canceled by the user.');
Summary
Axios는 요청 면에서 최고의 성과를 거두었다고 할 수 있으며, 패키징도 매우 사용하기 쉽습니다. 현재 다운로드 수: 4,784,599회, github star: 60,584회. 개발자들이 여전히 그를 매우 좋아한다는 것을 보여주는 것으로 충분합니다. 브라우저 지원 방법: IE 하위 버전을 제외하고 최신 버전의 브라우저를 지원합니다. (학습 영상 공유:
vuejs 튜토리얼,
웹 프론트엔드위 내용은 vue의 axios는 무엇을 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!