axios를 사용하여 Ajax 요청을 구현하는 방법(자세한 튜토리얼)

이전에는 jQuery의 Ajax 요청 작성 방법에 대해 소개했습니다. 이번 글에서는 Axios의 고급 실습과 가장 우아한 Ajax 요청 작성 방법에 대한 관련 정보를 주로 소개합니다. 샘플 코드를 통해 매우 상세하고 모든 사람의 공부나 업무에 대한 특정 참조 학습 가치가 있습니다. 필요한 친구는 아래를 살펴보십시오.

머리말

ajax는 너무 많이 소개할 필요가 없다고 생각합니다. 저자는 구성으로 해결할 수 있는 문제를 하드 코딩하면 안 된다고 굳게 믿고 있습니다. 자세한 소개를 살펴보세요.

자매 기사 jQuery Advanced: 가장 우아한 방식으로 ajax 요청 작성

axios는 Vue에서 공식적으로 권장하는 ajax 라이브러리로, vue-resource를 대체하는 데 사용됩니다. 더 자세한 기본 지식은 다음 글을 참조하세요: //www.jb51.net/article/109444.htm

장점:

• Ajax 인터페이스를 추가하려면 몇 줄만 더 작성하면 됩니다. 구성 파일에 있습니다

• 컴포넌트에서 axios 호출을 작성할 필요 없이 api 메소드를 직접 호출하면 매우 편리합니다

• 인터페이스를 조정하면 인터페이스 구성 파일

• 인터페이스 구성 통합 관리

1.컨텐츠 유형 구성

// filename: content-type.js
module.exports = {
 formData: 'application/x-www-form-urlencoded; charset=UTF-8',
 json: 'application/json; charset=UTF-8'
}

2.api 구성

// filename: api-sdk-conf.js
import contentType from './content-type'
export default {
 baseURL: 'http://192.168.40.231:30412',
 apis: [
 {
  name: 'login',
  path: '/api/security/login?{{id}}',
  method: 'post',
  contentType: contentType.formData,
  status: {
  401: '用户名或者密码错误'
  }
 }
 ]
}

3. 방법

// request.js
import axios from 'axios'
import qs from 'qs'
import contentType from '@/config/content-type'
import apiConf from '@/config/api-sdk-conf'
var api = {}
// render 函数用来渲染路径上的变量, 算是一个微型的模板渲染工具
// 例如render('/{{userId}}/{{type}}/{{query}}', {userId:1,type:2, query:3})
// 会被渲染成 /1/2/3
function render (tpl, data) {
 var re = /{{([^}]+)?}}/
 var match = ''
 while ((match = re.exec(tpl))) {
 tpl = tpl.replace(match[0], data[match[1]])
 }
 return tpl
}
// fire中的this, 会动态绑定到每个接口上
function fire (query = {}, payload = '') {
 // qs 特别处理 formData类型的数据
 if (this.contentType === contentType.formData) {
 payload = qs.stringify(payload)
 } 
 // 直接返回axios实例，方便调用then,或者catch方法
 return axios({
 method: this.method,
 url: render(this.url, query),
 data: payload,
 headers: {
  contentType: this.contentType
 }
 })
}
apiConf.apis.forEach((item) => {
 api[item.name] = {
 url: apiConf.baseURL + item.path,
 method: item.method,
 status: item.status,
 contentType: item.contentType,
 fire: fire
 }
})
export default api

4.

import api from '@/apis/request'
...
  api.login.fire({id: '?heiheihei'}, {
  username: 'admin',
  password: 'admin',
  namespace: '_system'
  })
...

검색 결과:

Request URL:http://192.168.40.231:30412/api/security/login??heiheihei
Request Method:POST
Status Code:200 OK
Remote Address:192.168.40.231:30412
Referrer Policy:no-referrer-when-downgrade
POST /api/security/login??heiheihei HTTP/1.1
Host: 192.168.40.231:30412
Connection: keep-alive
Content-Length: 47
Accept: application/json, text/plain, */*
Origin: http://localhost:8080
contentType: application/x-www-form-urlencoded; charset=UTF-8
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36
Content-Type: application/x-www-form-urlencoded
Referer: http://localhost:8080/
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
username=admin&password=admin&namespace=_system

5. 제가 잘 이해하지 못하는 부분이 있습니다. Answer로그인 방식만 필요한 컴포넌트라면, 그런데 이렇게 쓰면 에러가 납니다.

import {login} from '@/apis/request'

이렇게 작성하는 전제는 request.js 끝에

export var login = api.login

를 작성하는 것입니다. 하지만 인터페이스가 추가될 때마다 여기에 내보내야 하기 때문에 이는 원하지 않습니다. 개방-폐쇄 원칙을 준수하세요. 더 좋은 방법이 있나요?

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

nodejs를 사용하여 gulp 패키징을 구현하는 방법

Angular5.1의 새로운 기능에 대한 자세한 해석

vuex를 사용하여 메뉴 관리를 구현하는 방법

위 내용은 axios를 사용하여 Ajax 요청을 구현하는 방법(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!