1. 首页
  2. 文章中心
  3. JavaScript

基于axios请求封装的vue应用实例代码

192 阅读 0 评论
我是靠谱客的博主 热心小兔子，这篇文章主要介绍基于axios请求封装的vue应用实例代码，现在分享给大家，希望可以做个参考。

什么是axios？

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

特性：

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF

Promises

axios 依赖原生的 ES6 Promise 实现而被支持. 如果你的环境不支持 ES6 Promise，你可以使用 polyfill.

axios的请求类型？

安装好node的一套环境：

一下三种引用方式:
npm install axios -先在node中安装axios，api封装中引入axios即可
bower install axios --npm中安装 bower，在bower中引入axios包

bower：
Bower可以管理包含HTML，CSS，JavaScript，字体甚至图像文件的组件。Bower不会串联或缩小代码或执行其他任何操作-只会安装所需的正确版本的软件包及其依赖项。
直接vue中引入js文件
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

axios封装默认的自定义配置

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
const instance = axios.create({
{
   // `url` 是用于请求的服务器 URL
  url: '/user',

  // `method` 是创建请求时使用的方法
  method: 'get', // default

  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: 'https://some-domain.com/api/',

  // `transformRequest` 允许在向服务器发送前，修改请求数据
  // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
  // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
  transformRequest: [function (data, headers) {
    // 对 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, // default

  // `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', // default

  // `responseEncoding` indicates encoding to use for decoding responses
  // Note: Ignored for `responseType` of 'stream' or client-side requests
  responseEncoding: 'utf8', // default

   // `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称
  xsrfCookieName: 'XSRF-TOKEN', // default

  // `xsrfHeaderName` is the name of the http header that carries the xsrf token value
  xsrfHeaderName: 'X-XSRF-TOKEN', // default

   // `onUploadProgress` 允许为上传处理进度事件
  onUploadProgress: function (progressEvent) {
    // Do whatever you want with the native progress event
  },

  // `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; // default
  },

  // `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目
  // 如果设置为0，将不会 follow 任何重定向
  maxRedirects: 5, // default

  // `socketPath` defines a UNIX Socket to be used in node.js.
  // e.g. '/var/run/docker.sock' to send requests to the docker daemon.
  // Only either `socketPath` or `proxy` can be specified.
  // If both are specified, `socketPath` is used.
  socketPath: null, // default

  // `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) {
  })
}
}).then(function(response){
// `data` 由服务器提供的响应
  data: {},

  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',

  // `headers` 服务器响应的头
  headers: {},

   // `config` 是为请求提供的配置信息
  config: {},
 // 'request'
  // `request` is the request that generated this response
  // It is the last ClientRequest instance in node.js (in redirects)
  // and an XMLHttpRequest instance the browser
  request: {}
});

配置的加载优先级

高到低顺序：

第一步：配置默认值

在请求中设置的配置项

复制代码
1
2
3
instance.get('/longRequest', {
 timeout: 5000
});

第二部：全局的 axios 默认值

在api文件中设置的配置项

复制代码
1
instance.defaults.timeout = 2500;

第三步：自定义实例默认值

在创建axios实例中设置的配置项

复制代码
1
var instance = axios.create();

拦截器

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    switch (err.response.status) {
      case 400:
        err.message = '错误请求';
        break;
      case 401:
        err.message = '未授权，请重新登录';
        break;
      case 403:
        err.message = '拒绝访问';
        break;
      case 404:
        err.message = '请求错误,未找到该资源';
        break;
      case 405:
        err.message = '请求方法未允许';
        break;
      case 408:
        err.message = '请求超时';
        break;
       case 415:
        err.message = '服务器无法处理请求附带的媒体格式';
        break;
      case 500:
        err.message = '服务器出错';
        break;
      case 501:
        err.message = '网络未实现';
        break;
      case 502:
        err.message = '网络错误';
        break;
      case 503:
        err.message = '服务不可用';
        break;
      case 504:
        err.message = '网络超时';
        break;
      case 505:
        err.message = 'http版本不支持该请求';
        break;
      default:
        err.message = `连接错误${err.response.status}`;
    }
  } else {
    err.message = '连接到服务器失败';
  }
  return Promise.resolve(err.response);
  });

import Vue from ‘vue';
import axios from ‘axios';

get请求

复制代码
1
2
3
4
5
6
7
8
9
axios.get({
	method:'get',
	url:'xxxx',
	reponseType:'',//相应类型
	parems:{//入参
	}
}).then(function(response){
	....
})

post请求

复制代码
1
2
3
4
5
6
7
8
9
10
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
}).then(function(res){

});

delete请求

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
axios({
  method: 'delete',
  url: '/user/12345',
 //入参一：挂载到请求后面
 parmes：{
 }
 //入参二：挂载到请求体内
 data{
}
}).then(function(res){

});

put请求：更新整个对象资源

复制代码
1
2
3
4
5
6
7
8
axios({
  method: 'put',
  url: '/user/12345',
 data{
}
}).then(function(res){

});

patch请求：更新对象的局部资源

复制代码
1
2
3
4
5
6
7
8
axios({
  method: 'patch',
  url: '/user/12345',
 data{
}
}).then(function(res){

});

提供封装后的另一种写法：
axios.get(url[, config])
axios.delete(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

并发请求

复制代码
1
2
3
4
5
axios.all(iterable)
axios.spread(callback)
function getUserAccount() {
return axios.get('/user/12345');
}
复制代码
1
2
3
4
5
6
7
8
function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}
//请求数组
axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {//对应请求的响应体
    // 两个请求现在都执行完成
  }));

axios与ajax的区别？

axios：

从 node.js 创建 http 请求

支持 Promise API

客户端支持防止CSRF

提供了一些并发请求的接口（重要，方便了很多的操作）

ajax：

3.JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）

axios怎样自定义封装？

1、建立接口请求封装、响应、拦截、认证、等基础配置文件 index.js

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
引入静态资源
import axios from 'axios';
 import qs from 'qs';
import apiMap from './apiMap';

设置全局默认参数
axios.defaults.withCredentials = false;
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';

设置请求默认参数
const instance = axios.create({
    baseURL: process.env.API_ROOT,
    timeout: 15 * 1000,
    auth: {
    	...
    },
    headers: {
      'Content-Type': 'application/json;charset=utf-8',
      'X-Requested-With': 'XMLHttpRequest',
    },
  },
);
设置请求拦截：
instance.interceptors.request.use(function (config) {
...
})
设置相应拦截：
// 响应拦截器即异常处理
instance.interceptors.response.use(response =>
   response
, (err) => {
  if (err && err.response) {
    switch (err.response.status) {
      case 400:
        err.message = '错误请求';
        break;
      case 401:
        err.message = '未授权，请重新登录';
        break;
      case 403:
        err.message = '拒绝访问';
        break;
      case 404:
        err.message = '请求错误,未找到该资源';
        break;
      case 405:
        err.message = '请求方法未允许';
        break;
      case 408:
        err.message = '请求超时';
        break;
       case 415:
        err.message = '服务器无法处理请求附带的媒体格式';
        break;
      case 500:
        err.message = '服务器出错';
        break;
      case 501:
        err.message = '网络未实现';
        break;
      case 502:
        err.message = '网络错误';
        break;
      case 503:
        err.message = '服务不可用';
        break;
      case 504:
        err.message = '网络超时';
        break;
      case 505:
        err.message = 'http版本不支持该请求';
        break;
      default:
        err.message = `连接错误${err.response.status}`;
    }
  } else {
    err.message = '连接到服务器失败';
  }
  return Promise.resolve(err.response);
});
封装接口请求：
let api={
	/**
	
	* get 方法封装
	
	* @param url
	
	* @param params
	
	* @returns {Promise}
	
	*/
	
	get (url, params = {}) {
	  return new Promise((resolve, reject) => {
		  instance.get(apiMap[url],params).then(res => {
	      resolve(res.data)
	    }).catch(err => {
	      reject(err)
	    })
	  })
	},
	
	/**
	
	* post
	
	* @param url
	
	* @param params
	
	* @returns {Promise}
	
	*/
	
	post (url, params = {}) {
	  return new Promise((resolve, reject) => {
	    instance.post(apiMap[url], params)
	      .then(res => {
	        resolve(res.data)
	      }, err => {
	        reject(err)
	      })
	  })
	},
	
	/**
	
	* delete 方法封装
	
	* @param url
	
	* @param params
	
	* @returns {Promise}
	
	*/
	
	delete (url, params = {}) {
	  return new Promise((resolve, reject) => {
	    instance.delete(apiMap[url] ,params).then(res => {
	      resolve(res.data)
	    }).catch(err => {
	      reject(err)
	    })
	  })
	},
	
	/**
	
	* put 方法封装
	
	* @param url
	
	* @param params
	
	* @returns {Promise}
	
	*/
	
	put (url, params = {}) {
	  return new Promise((resolve, reject) => {
	    instance.put(apiMap[url], params).then(res => {
	      resolve(res.data)
	    }).catch(err => {
	      reject(err)
	    })
	  })
	},
	
	/**
	
	* patch 方法封装
	
	* @param url
	
	* @param params
	
	* @returns {Promise}
	
	*/
	
	patch (url, params = {}) {
	  return new Promise((resolve, reject) => {
	    instance.patch(apiMap[url], params).then(res => {
	      resolve(res.data)
	    }).catch(err => {
	      reject(err)
	    })
	  })
	}
}

export default api;

2、创建一个key-vlue形式的接口文件，方便接口请求管理 apiMap.js

复制代码
1
2
3
4
export default {
  // 主题列表
  key: 'path'
};

3、将index文件引入vue入口文件中

复制代码
1
2
3
4
5
6
7
8
9
10
引入vue资源
import Vue from 'vue'
引入viewui插件
import ViewUI from 'view-design';
引入viewuicss文件
import 'view-design/dist/styles/iview.css';
导入文件|默认不需要加文件后缀
import Api from '/index';
全局绑定|$ 为实例属性设置作用域
Vue.prototype.$api = Api;

全局参数配置：

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
创建配置文件index.js：
import Vue from 'vue';
import Vuex from 'vuex';
import State from './state';
Vue.use(Vuex);
const store = new Vuex.Store(State);
export default store;
创建全局参数详细文件state.js
export default {
	state: {   //这里放全局参数
		test: 0
	},
	mutations:{   //设置值
		test(state,value)=>state.test=value;
	},
	getters:{//返回值
		test: state =>state.test;
	}
};
调用方式：
var data = this.$store.getter.test;
var data = this.$store.commit('test',数据);

Vue.use(Vuex);

判断vue是否已经注册过vuex插件；

将vuexInit函数混入到vue的beforeCreate生命周期中;

实例化vue时，会在vue每个实例上添加s t o r e 属 性 ， 并 将 v u e x 的 实 例 绑 定 到 store属性，并将vuex的实例绑定

到store属性，并将vuex的实例绑定到store属性上。

总结

到此这篇关于基于axios请求封装的vue应用的文章就介绍到这了,更多相关axios请求封装内容请搜索靠谱客以前的文章或继续浏览下面的相关文章希望大家以后多多支持靠谱客！

最后

以上就是热心小兔子最近收集整理的关于基于axios请求封装的vue应用实例代码的全部内容，更多相关基于axios请求封装内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(127)

相关文章

详解Vue组件复用和扩展之道
详解Vue组件复用和扩展之道
Vue3使用mitt进行组件通信的步骤
Vue3使用mitt进行组件通信的步骤
Vue详细的入门笔记
Vue详细的入门笔记
vue完美实现el-table列宽自适应
vue完美实现el-table列宽自适应
基于axios请求封装的vue应用实例代码
基于axios请求封装的vue应用实例代码
django+vue实现注册登录的示例代码
django+vue实现注册登录的示例代码
Vue如何使用CSS自定义变量
Vue如何使用CSS自定义变量
关于Vue Router的10条高级技巧总结
关于Vue Router的10条高级技巧总结

评论列表共有 0 条评论

立即
投稿
返回
顶部