http央浼出现的难点,axios本人踩过的坑

axios的牵线就绝不了吗,api有切实可行的介绍axios或者是axios中文;

缓和vue第22中学接纳axios http央求出现的标题,vue2axios

利用axios管理post哀求时,出现的标题一蹴即至

默许境况下: axios.post(url, params).then(res => res.data);

当url是长间距接口链接时,会报404的荒谬:

Uncaught (in promise) Error: Request failed with status code 404

我们须求实例化七个新的axios,何况安装他的新闻头为'content-type': ‘application/x-www-form-urlencoded'

于是得出应用方案:

var instance = axios.create({
 headers: {'content-type': 'application/x-www-form-urlencoded'}
});
instance .post(`url`, params).then(res => res.data);

下一场开掘不报错了,然而后台接受不到传播参数,查阅资料,开掘需求引入叁个qs模块

var qs=require('qs');
var instance = axios.create({
 headers: {'content-type': 'application/x-www-form-urlencoded'}
});
instance .post(`url`, qs.stringify(params)).then(res => res.data);

劳苦功高告成!

主题材料化解!

以上那篇消除vue第22中学采取axios http乞请现身的标题就是作者分享给我们的全部内容了,希望能给大家四个参阅,也指望大家多多关照帮客之家。

http乞请出现的难题,vue2axios 使用axios管理post央浼时,出现的主题材料解决 默许情状下: axios.post(url, params).then(res = res.data...

主要讲的便是本人自个儿在首先次利用axios中相遇的标题,及二遍封装

先来讲说三遍封装,在此之前自身也是英特网找了非常多同室的卷入,要么正是把post和get央浼分开的,要么就是只大致写了一种的照旧只是吧API又复制粘贴了的,都不太切合实际的施用,那就协和写呗

asxios的post和get叁个传值是接纳data,多个是选取params,我要直接调用三回封装的ajax依照不同的央浼类型来使用data或许params,当初认为data和params是不能够存活的,结果测量试验是可行的,贴代码吧

 

 1 ajax: function (opt) {
 2   var opts = opt || {};
 3 
 4   if (!opts.url) {
 5     alert(接口都不写,想干嘛?');
 6     return false;
 7   }
 8   if (opts.type === undefined) {
 9     opts.type = 'post'
10   }
11   axios({
12     method: opts.type,
13     url: opts.url,
14     // `params` 是即将与请求一起发送的 URL 参数
15     // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
16     params: (opts.type === "get") ? opts.data : {},
17     // params:opts.data,
18 
19     // `data` 是作为请求主体被发送的数据
20     // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
21     // 在没有设置 `transformRequest` 时,必须是以下类型之一:
22     // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
23     // - 浏览器专属:FormData, File, Blob
24     // - Node 专属: Stream
25     data: (opts.type === "post") ? qs.stringify(opts.data) : {},
26     headers: opts.headers || {
27       'Content-Type': 'application/x-www-form-urlencoded'
28     },
29     // `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。
30     // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
31     baseURL: '你的接口地址/',
32     // `transformRequest` 允许在向服务器发送前,修改请求数据(请求前处理)
33     // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
34     // 后面数组中的函数必须返回一个字符串,或 ArrayBuffer,或 Stream
35     transformRequest: [function (data) {
36       // 对 data 进行任意转换处理38       return data;
39     }],
40     // `transformResponse` 在传递给 then/catch 前,允许修改响应数据(请求返回的数据)
41     transformResponse: [function (data) {
42       // 对 data 进行任意转换处理
43       return data;
44     }],
45     // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
46     // 如果请求话费了超过 `timeout` 的时间,请求将被中断
47     timeout: opts.time || 10 * 1000,
48     //返回数据类型
49     responseType: opts.dataType || 'json'
50   }).then(function (res) {
51     console.log(res);
52     if (res.status == 200) {
53       if (opts.success) {
54         opts.success(res.data, res);
55       }
56     } else {
57       alert(res.data.error);
58     }
59   }).catch(function (error) {
60     //请求已发出,但服务器使用状态代码进行响应
61     //落在2xx的范围之外
62     console.log(error);
63     if (opts.error) {
64       opts.error(error);
65     } else {
66       //在设置触发错误的请求时发生了错误
67       alert('出错了');
68     }
69     console.log(error.config);
70   });
71 
72 },

下一场还会有个地点要留神的便是其一

 qs.stringify(opts.data)

为什么这么干呢,就是因为,在使用post请求时如果不使用qs.stringify()转的话,后台是拿不到数据的,这也是一个坑,踩了好久;

 

有不准绳的招待指正

 

有难堪的接待指正

本文由星彩网app下载发布于星彩网app下载,转载请注明出处:http央浼出现的难点,axios本人踩过的坑

TAG标签: 星彩网app下载
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。