先安装 axios
NPM install axios
下面是简单的封装一个 http.JS, 在此说明 checkStatus 这个方法呢 是不一定需要的 , 根据个人的项目需求吧, 也可以直接返回 response, 交给后面另行处理也行.
或者根据后端返回的状态, 在里面进行处理 也行.
- "use strict";
- import axios from "axios";
- import qs from "qs";
- // 添加请求拦截器
- axios.interceptors.request.use(
- config => {
- return config;
- },
- error => {
- return Promise.reject(error);
- }
- );
- // 添加响应拦截器
- axios.interceptors.response.use(
- response => {
- return response;
- },
- error => {
- return Promise.resolve(error.response);
- }
- );
- axios.defaults.baseURL = "https://www.xxxx/api";
- axios.defaults.headers.post["Content-Type"] = "application/json";
- axios.defaults.headers.post["X-Requested-With"] = "XMLHttpRequest";
- axios.defaults.timeout = 10000;
- function checkStatus(response) {
- return new Promise((resolve, reject) => {
- if (
- response &&
- (response.status === 200 ||
- response.status === 304 ||
- response.status === 400)
- ) {
- resolve(response.data);
- } else {
- reject({
- state: "0",
- message: "网络出现问题"
- });
- }
- });
- }
- export default {
- post(url, params) {
- return axios({
- method: "post",
- url,
- data: params
- }).then(response => {
- return checkStatus(response);
- });
- },
- get(url, params) {
- params = qs.stringify(params);
- return axios({
- method: "get",
- url,
- params
- }).then(response => {
- return checkStatus(response);
- });
- }
- };// 如有不懂欢迎加全栈开发交流 QQ 群: 864305860
在 vue 项目中, main.JS 这个文件
- import http from "./utils/http";
- Vue.prototype.$http = http;
使用 helloworld.vue
- // 如有不懂欢迎加全栈开发交流 QQ 群: 864305860
- methods: {
- async TestPost() {
- try {
- const res = await this.$http.post("/message/socketid", {
- account: "huangenai"
- });
- console.log(res);
- } catch (error) {
- console.log(error);
- }
- },
- async TestGet() {
- this.$http
- .get("/price")
- .then(res => {
- console.log(res);
- })
- .catch(error => {
- alert(error);
- });
- }
- }// 如有不懂欢迎加全栈开发交流 QQ 群: 864305860
在 main.JS 中将 http.JS import 进来 并暴露到全局使用, 在任何 vue 页面中 就不再需要 import http.JS 了, 而直接通过 this.$http.post this.$http.get 来使用, 在 checkStatus 中统一异步返回, 顺便可以处理错误的情况.
checkStatus 方法 返回了一个 Promise
链式结构的话看上面那个 get 的方法, this.$http.get(...).then(...).catch(...), 如果 then 里面又来一个 http 请求 会一层包住一层.
- function checkStatus(response) {
- return new Promise(resolve => {
- if (
- response &&
- (response.status === 200 ||
- response.status === 304 ||
- response.status === 400)
- ) {
- resolve(response.data);
- } else {
- resolve({
- state: "0",
- message: "网络出现问题"
- });
- }
- });
- }
来源: http://www.qdfuns.com/article/51117/00c3408aff5e2bd32b71768b0a4b2369.html