Vue 的 Ajax(axios)
Vue 推荐使用 axios 来完成 ajax 请求
Axios 是一个基于 Promise 的 HTTP 库,可以在浏览器或者 Node 中使用
简单的 Axios 实例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| axios({ method: "post", url: "/user/12345", data: { firstName: "Fred", lastName: "Flintstone" } });
axios({ method: "get", url: "http://bit.ly/2mTM3nY", responseType: "stream" }).then(function(response) { response.data.pipe(fs.createWriteStream("ada_lovelace.jpg")); });
axios("/user/12345");
|
请求方法的别名
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
注意:在使用别名方法时, url、method、data 这些属性都不必在配置中指定。
请求结构
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
| axios({ url: "/user", method: "get",
baseURL: "https://some-domain.com/api/",
transformRequest: [function (data) { return data; }],
transformResponse: [function (data) { return data; }],
headers: {"X-Requested-With": "XMLHttpRequest"},
params: { ID: 12345 },
paramsSerializer: function(params) { return Qs.stringify(params, {arrayFormat: "brackets"}) },
data: { firstName: "Fred" },
timeout: 1000,
withCredentials: false,
adapter: function (config) { },
auth: { username: "janedoe", password: "s00pers3cret" },
responseType: "json",
xsrfCookieName: "XSRF-TOKEN",
xsrfHeaderName: "X-XSRF-TOKEN",
onUploadProgress: function (progressEvent) { },
onDownloadProgress: function (progressEvent) { },
maxContentLength: 2000,
validateStatus: function (status) { return status >= 200 && status < 300; },
proxy: { host: "127.0.0.1", port: 9000, auth: : { username: "mikeymike", password: "rapunz3l" } },
cancelToken: new CancelToken(function (cancel) { }) })
|
响应结构
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| axios({}).then(function(res) { console.log(response.data);
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config); });
|
Anything can go right will go right