Axios 구성 단계(자세한 튜토리얼)

이 글에서는 주로 동적 Axios의 구성 단계를 공유합니다. 이 튜토리얼을 통해 동적 Axios의 구성을 쉽게 구현할 수 있습니다.

서문

예전에 Vue 프로젝트를 작성할 때 프로젝트 ajax 라이브러리로 vue-resource를 사용했습니다. 11월 어느 날 Youda Weibo는 ajax 라이브러리가 보편적이어야 한다고 업데이트하고 vue-resource를 포기했습니다. 리소스 기술 지원을 받으려면 axios를 사용하는 것이 좋습니다.

프로젝트를 생성하고 관리하려면 Vue-cli 도구를 사용하는 것이 좋습니다. 처음에는 익숙하지 않더라도 사용하고 나면 그 비밀을 알게 될 것입니다. 얼마전 공식적으로 추천하는 데이터요청 플러그인이 Vue-resource 였는데, 지금은 왜 바뀌었는지 알 필요는 없겠지만, 저것보다는 이게 더 좋습니다. 그러니 그냥 사용해 보세요. 여기 Axios를 캡슐화한 내용이 있습니다. 제가 틀렸다면 알려주시기 바랍니다.

방법은 다음과 같습니다

1. Vue 프로젝트가 초기화된 후 src 디렉터리에 util 도구 폴더를 만듭니다. 이제 일반적으로 일부 캡슐화된 함수 메서드를 저장하는 데 사용됩니다. util 파일 디렉터리에 util 파일 디렉터리를 생성하여 axios 메소드를 캡슐화합니다.

둘째, 코드를 직접 업로드하세요(일반 버전), 코드에 자세한 설명이 있습니다

import axios from 'axios' //引用axios
import {Promise} from 'es6-promise' //引入Promise
// axios 配置
axios.defaults.timeout = 5000; //设置超时时间
axios.defaults.baseURL = 'http://localhost:4000/api/v1/'; //这是调用数据接口
// http request 拦截器（所有发送的请求都要从这儿过一次），通过这个，我们就可以把token传到后台，我这里是使用sessionStorage来存储token等权限信息和用户信息，若要使用cookie可以自己封装一个函数并import便可使用
axios.interceptors.request.use(
 config => {
  const token = sessionStorage.getItem("token"); //获取存储在本地的token
  config.data = JSON.stringify(config.data);
  config.headers = {
   'Content-Type':'application/json' //设置跨域头部,虽然很多浏览器默认都是使用json传数据，但咱要考虑IE浏览器。
  };
  if (token) {
   config.headers.Authorization = "Token " + token; //携带权限参数
  }
  return config;
 },
 err => {
  return Promise.reject(err);
 }
);


// http response 拦截器（所有接收到的请求都要从这儿过一次）
axios.interceptors.response.use(
 response => {
//response.status===401是我和后台约定的权限丢失或者权限不够返回的状态码，这个可以自己和后台约定，约定返回某个自定义字段也是可以的
  if(response.status == 401) {
   router.push({ //push后面是一个参数对象，可以携带很多参数，具体可以去vue-router上查看，例如query字段表示携带的参数
    path: '/login' 
   })
  }
  return response;
 },
 error => {
  return Promise.reject(error.response.data)
 });

export default axios;

/**
 * fetch 请求方法
 * @param url
 * @param params
 * @returns {Promise}
 */
export function fetch(url, params = {}) {
 return new Promise((resolve, reject) => {
  axios.get(url, {
   params: params
  })
  .then(response => {
   resolve(response.data);
  })
  .catch(err => {
   reject(err)
  })
 })
}

/**
 * post 请求方法
 * @param url
 * @param data
 * @returns {Promise}
 */
export function post(url, data = {}) {
 return new Promise((resolve, reject) => {
  axios.post(url, data)
   .then(response => {
    resolve(response.data);
   }, err => {
    reject(err);
   })
 })
}

/**
 * patch 方法封装
 * @param url
 * @param data
 * @returns {Promise}
 */
export function patch(url, data = {}) {
 return new Promise((resolve, reject) => {
  axios.patch(url, data)
   .then(response => {
    resolve(response.data);
   }, err => {
    reject(err);
   })
 })
}

/**
 * put 方法封装
 * @param url
 * @param data
 * @returns {Promise}
 */
export function put(url, data = {}) {
 return new Promise((resolve, reject) => {
  axios.put(url, data)
   .then(response => {
    resolve(response.data);
   }, err => {
    reject(err);
   })
 })
}

셋, (동적 버전), axios 인터셉터가 필요하지 않으며 모든 프로젝트에 필요한 것은 아니며 Content-Type은 헤더와 권한 부여가 둘 이상인 경우 다른 방법을 사용해야 합니다.

util/http.js

import axios from 'axios' //引用axios
import {Promise} from 'es6-promise' //引入Promise
// axios 配置和拦截器都不用了，这里我使用了一个动态配置数据请求地址，在App.vue中，代码在下面，这个也不是必须的。
//^_^下面都设置一个默认的头部，使用的时候可以传入数据覆盖^_^,例如使用fetch(GET)方法时，没有请求数据，但是请求头有变化，则应写成 fetch("地址", {}, {"这里写头部的内容"}) 记住没数据用一个空对象占位置
/**
 * fetch 请求方法
 * @param url
 * @param params
 * @returns {Promise}
 */
export function fetch(url, params = {}, headers = {
 'Content-Type': 'application/json', //设置跨域头部
 "Authorization": 'JWT ' + sessionStorage.getItem("authToken")
}) {

 return new Promise((resolve, reject) => {
  axios.get(url, {
   params: params,
   headers: headers
  })
  .then(response => {
   resolve(response.data);
  })
  .catch(err => {
   reject(err.response)
  })
 })
}

/**
 * post 请求方法
 * @param url
 * @param data
 * @returns {Promise}
 */
export function post(url, data = {}, config = {
 "headers": {
  'Content-Type': 'application/json', //设置跨域头部
  "Authorization": 'JWT ' + sessionStorage.getItem("authToken")
 }
}) {
 return new Promise((resolve, reject) => {
  axios.post(url, data, config)
   .then(response => {
    resolve(response.data);
   }, err => {
    reject(err.response);
   })
 })
}

/**
 * patch 方法封装
 * @param url
 * @param data
 * @returns {Promise}
 */
export function patch(url, data = {}, config = {
 "headers": {
  'Content-Type': 'application/json', //设置跨域头部
  "Authorization": 'JWT ' + sessionStorage.getItem("authToken")
 }
}) {
 return new Promise((resolve, reject) => {
  axios.patch(url, data, config)
   .then(response => {
    resolve(response.data);
   }, err => {
    reject(err.response);
   })
 })
}

/**
 * put 方法封装
 * @param url
 * @param data
 * @returns {Promise}
 */
export function put(url, data = {}, config = {
 "headers": {
  'Content-Type': 'application/json', //设置跨域头部
  "Authorization": 'JWT ' + sessionStorage.getItem("authToken")
 }
}) {
 return new Promise((resolve, reject) => {
  axios.put(url, data, config)
   .then(response => {
    resolve(response.data);
   }, err => {
    reject(err.response);
   })
 })
}

App.vue (src 디렉터리에 있는 프로그램 항목 파일입니다)

<template>
 <p id="app">
 <router-view/>
 </p>
</template>

<script>
import axios from &#39;axios&#39;;
let protocol = window.location.protocol; //协议
let host = window.location.host; //主机
let reg = /^localhost+/;
if(reg.test(host)) {
 //若本地项目调试使用
 axios.defaults.baseURL = &#39;http://10.0.xx.xxx:xxxx/api/&#39;;
} else {
 //动态请求地址
 axios.defaults.baseURL = protocol + "//" + host + "/api/";
}
axios.defaults.timeout = 30000;
export default {
 name: &#39;app&#39;,
 axios //这里记得导出，若请求地址永久固定一个，则就按照`普通版`配置一个baserURL就可以了
}
</script>

<style lang="scss"> //这里我使用的是scss
@import &#39;~@/style/style&#39;
</style>

Summary

FAQ

동적 버전을 사용할 때 왜 호출되는지요? 동적입니다. 액세스 주소와 요청 주소가 동일한 주소와 포트 번호이기 때문입니다. 예를 들어 http://www.cmgos.com(기본 포트 80)을 통해 프로젝트에 액세스하면 기본 URL이 자동으로 http로 변경됩니다. :www .cmgos.com:80/api/, 그 이유는 어느 날 프로젝트가 마이그레이션되거나 http가 https로 변경되면 요청 주소를 변경할 필요 없이 프로그램이 자동으로 완료되기 때문입니다
데이터 요청 주소가 올바르게 구성되어 있나요? baseURL을 구성하면 캡슐화된 함수를 사용할 때 baseURL을 기반으로 요청 주소만 전달하면 됩니다. 예를 들어 login/을 전달하면 요청 주소는 자동으로 http:www.cmgos.com:80이 됩니다. /api/login/ 구성하지 않으면 전체 요청 주소를 직접 전달할 수 있습니다

Notes

동적 버전을 사용할 경우 인터셉터를 사용하지 않으므로 아래에 캡슐화된 함수를 err.response.data来获取返回的数据，但我写的是err.response，因为这样可以拿到(status)状态码等信息，若不需要判断返回的状态码，则改为err.response.data로 작성해야 합니다. 오류가 반환될 때

위 내용은 제가 나중에 여러분에게 도움이 되기를 바랍니다.

관련 기사:

pace.js 및 NProgress.js 로딩 진행 플러그인 사용 방법(자세한 튜토리얼)

WeChat 미니 프로그램의 앱 수명 주기 정보(자세한 튜토리얼)

NProgress 정보 jQuery에서 .js 로딩 진행 플러그인을 사용하는 방법

WeChat 애플릿에서 스위치 구성 요소를 사용하는 방법

위 내용은 Axios 구성 단계(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!