上一篇：Vue.js 混入下一篇：Vue.js Ajax(vue-resource)

Vue.js Ajax(axios)

Vue.js 2.0 版本推薦使用 axios 來(lái)完成 ajax 請(qǐng)求。

Axios 是一個(gè)基于 Promise 的 HTTP 庫(kù)，可以用在瀏覽器和 node.js 中。

Github開(kāi)源地址： https://github.com/axios/axios

安裝方法

使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

或

<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

使用 npm:

$ npm install axios

使用 bower:

$ bower install axios

使用 yarn:

$ yarn add axios

瀏覽器支持情況

GET 方法

我們可以簡(jiǎn)單的讀取 JSON 數(shù)據(jù)：

GET 實(shí)例

new Vue({ el: '#app', data () { return { info: null } }, mounted () { axios .get('/try/ajax/json_demo.json') .then(response => (this.info = response)) .catch(function (error) { // 請(qǐng)求失敗處理 console.log(error); }); } })

運(yùn)行代碼 ?

使用 response.data 讀取 JSON 數(shù)據(jù)：

GET 實(shí)例

<div id="app"> <h1>網(wǎng)站列表</h1> <div v-for="site in info" > {{ site.name }} </div> </div> <script type = "text/javascript"> new Vue({ el: '#app', data () { return { info: null } }, mounted () { axios .get('/try/ajax/json_demo.json') .then(response => (this.info = response.data.sites)) .catch(function (error) { // 請(qǐng)求失敗處理 console.log(error); }); } }) </script>

運(yùn)行代碼 ?

GET 方法傳遞參數(shù)格式如下：

傳遞參數(shù)說(shuō)明

// 直接在 URL 上添加參數(shù) ID=12345 axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // 也可以通過(guò) params 設(shè)置參數(shù)： axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });

POST 方法

POST 實(shí)例

new Vue({ el: '#app', data () { return { info: null } }, mounted () { axios .post('/try/ajax/demo_axios_post.php') .then(response => (this.info = response)) .catch(function (error) { // 請(qǐng)求失敗處理 console.log(error); }); } })

運(yùn)行代碼 ?

POST 方法傳遞參數(shù)格式如下：

傳遞參數(shù)說(shuō)明

axios.post('/user', { firstName: 'Fred', // 參數(shù) firstName lastName: 'Flintstone' // 參數(shù) lastName }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });

執(zhí)行多個(gè)并發(fā)請(qǐng)求

實(shí)例

axios API

可以通過(guò)向 axios 傳遞相關(guān)配置來(lái)創(chuàng)建請(qǐng)求。

實(shí)例

axios(config) // 發(fā)送 POST 請(qǐng)求 axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' } }); // GET 請(qǐng)求遠(yuǎn)程圖片 axios({ method:'get', url:'http://bit.ly/2mTM3nY', responseType:'stream' }) .then(function(response) { response.data.pipe(fs.createWriteStream('ada_lovelace.jpg')) }); axios(url[, config]) // 發(fā)送 GET 請(qǐng)求（默認(rèn)的方法） axios('/user/12345');

請(qǐng)求方法的別名

為方便使用，官方為所有支持的請(qǐng)求方法提供了別名，可以直接使用別名來(lái)發(fā)起請(qǐng)求：

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]])

注意：在使用別名方法時(shí)， url、method、data 這些屬性都不必在配置中指定。

并發(fā)

處理并發(fā)請(qǐng)求的助手函數(shù)：

axios.all(iterable)
axios.spread(callback)

創(chuàng)建實(shí)例

可以使用自定義配置新建一個(gè) axios 實(shí)例：

axios.create([config])
const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

實(shí)例方法

以下是可用的實(shí)例方法。指定的配置將與實(shí)例的配置合并：

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]])

請(qǐng)求配置項(xiàng)

下面是創(chuàng)建請(qǐng)求時(shí)可用的配置選項(xiàng)，注意只有 url 是必需的。如果沒(méi)有指定 method，請(qǐng)求將默認(rèn)使用 get 方法。

{
  // `url` 是用于請(qǐng)求的服務(wù)器 URL
  url: "/user",

  // `method` 是創(chuàng)建請(qǐng)求時(shí)使用的方法
  method: "get", // 默認(rèn)是 get

  // `baseURL` 將自動(dòng)加在 `url` 前面，除非 `url` 是一個(gè)絕對(duì) URL。
  // 它可以通過(guò)設(shè)置一個(gè) `baseURL` 便于為 axios 實(shí)例的方法傳遞相對(duì) URL
  baseURL: "https://some-domain.com/api/",

  // `transformRequest` 允許在向服務(wù)器發(fā)送前，修改請(qǐng)求數(shù)據(jù)
  // 只能用在 "PUT", "POST" 和 "PATCH" 這幾個(gè)請(qǐng)求方法
  // 后面數(shù)組中的函數(shù)必須返回一個(gè)字符串，或 ArrayBuffer，或 Stream
  transformRequest: [function (data) {
    // 對(duì) data 進(jìn)行任意轉(zhuǎn)換處理

    return data;
  }],

  // `transformResponse` 在傳遞給 then/catch 前，允許修改響應(yīng)數(shù)據(jù)
  transformResponse: [function (data) {
    // 對(duì) data 進(jìn)行任意轉(zhuǎn)換處理

    return data;
  }],

  // `headers` 是即將被發(fā)送的自定義請(qǐng)求頭
  headers: {"X-Requested-With": "XMLHttpRequest"},

  // `params` 是即將與請(qǐng)求一起發(fā)送的 URL 參數(shù)
  // 必須是一個(gè)無(wú)格式對(duì)象(plain object)或 URLSearchParams 對(duì)象
  params: {
    ID: 12345
  },

  // `paramsSerializer` 是一個(gè)負(fù)責(zé) `params` 序列化的函數(shù)
  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: function(params) {
    return Qs.stringify(params, {arrayFormat: "brackets"})
  },

  // `data` 是作為請(qǐng)求主體被發(fā)送的數(shù)據(jù)
  // 只適用于這些請(qǐng)求方法 "PUT", "POST", 和 "PATCH"
  // 在沒(méi)有設(shè)置 `transformRequest` 時(shí)，必須是以下類(lèi)型之一：
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 瀏覽器專(zhuān)屬：FormData, File, Blob
  // - Node 專(zhuān)屬： Stream
  data: {
    firstName: "Fred"
  },

  // `timeout` 指定請(qǐng)求超時(shí)的毫秒數(shù)(0 表示無(wú)超時(shí)時(shí)間)
  // 如果請(qǐng)求花費(fèi)了超過(guò) `timeout` 的時(shí)間，請(qǐng)求將被中斷
  timeout: 1000,

  // `withCredentials` 表示跨域請(qǐng)求時(shí)是否需要使用憑證
  withCredentials: false, // 默認(rèn)的

  // `adapter` 允許自定義處理請(qǐng)求，以使測(cè)試更輕松
  // 返回一個(gè) promise 并應(yīng)用一個(gè)有效的響應(yīng) (查閱 [response docs](#response-api)).
  adapter: function (config) {
    /* ... */
  },

  // `auth` 表示應(yīng)該使用 HTTP 基礎(chǔ)驗(yàn)證，并提供憑據(jù)
  // 這將設(shè)置一個(gè) `Authorization` 頭，覆寫(xiě)掉現(xiàn)有的任意使用 `headers` 設(shè)置的自定義 `Authorization`頭
  auth: {
    username: "janedoe",
    password: "s00pers3cret"
  },

  // `responseType` 表示服務(wù)器響應(yīng)的數(shù)據(jù)類(lèi)型，可以是 "arraybuffer", "blob", "document", "json", "text", "stream"
  responseType: "json", // 默認(rèn)的

  // `xsrfCookieName` 是用作 xsrf token 的值的cookie的名稱(chēng)
  xsrfCookieName: "XSRF-TOKEN", // default

  // `xsrfHeaderName` 是承載 xsrf token 的值的 HTTP 頭的名稱(chēng)
  xsrfHeaderName: "X-XSRF-TOKEN", // 默認(rèn)的

  // `onUploadProgress` 允許為上傳處理進(jìn)度事件
  onUploadProgress: function (progressEvent) {
    // 對(duì)原生進(jìn)度事件的處理
  },

  // `onDownloadProgress` 允許為下載處理進(jìn)度事件
  onDownloadProgress: function (progressEvent) {
    // 對(duì)原生進(jìn)度事件的處理
  },

  // `maxContentLength` 定義允許的響應(yīng)內(nèi)容的最大尺寸
  maxContentLength: 2000,

  // `validateStatus` 定義對(duì)于給定的HTTP 響應(yīng)狀態(tài)碼是 resolve 或 reject  promise 。如果 `validateStatus` 返回 `true` (或者設(shè)置為 `null` 或 `undefined`)，promise 將被 resolve; 否則，promise 將被 rejecte
  validateStatus: function (status) {
    return status &gt;= 200 &amp;&amp; status &lt; 300; // 默認(rèn)的
  },

  // `maxRedirects` 定義在 node.js 中 follow 的最大重定向數(shù)目
  // 如果設(shè)置為0，將不會(huì) follow 任何重定向
  maxRedirects: 5, // 默認(rèn)的

  // `httpAgent` 和 `httpsAgent` 分別在 node.js 中用于定義在執(zhí)行 http 和 https 時(shí)使用的自定義代理。允許像這樣配置選項(xiàng)：
  // `keepAlive` 默認(rèn)沒(méi)有啟用
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),

  // "proxy" 定義代理服務(wù)器的主機(jī)名稱(chēng)和端口
  // `auth` 表示 HTTP 基礎(chǔ)驗(yàn)證應(yīng)當(dāng)用于連接代理，并提供憑據(jù)
  // 這將會(huì)設(shè)置一個(gè) `Proxy-Authorization` 頭，覆寫(xiě)掉已有的通過(guò)使用 `header` 設(shè)置的自定義 `Proxy-Authorization` 頭。
  proxy: {
    host: "127.0.0.1",
    port: 9000,
    auth: : {
      username: "mikeymike",
      password: "rapunz3l"
    }
  },

  // `cancelToken` 指定用于取消請(qǐng)求的 cancel token
  // （查看后面的 Cancellation 這節(jié)了解更多）
  cancelToken: new CancelToken(function (cancel) {
  })
}

響應(yīng)結(jié)構(gòu)

axios請(qǐng)求的響應(yīng)包含以下信息：

{
  // `data` 由服務(wù)器提供的響應(yīng)
  data: {},

  // `status`  HTTP 狀態(tài)碼
  status: 200,

  // `statusText` 來(lái)自服務(wù)器響應(yīng)的 HTTP 狀態(tài)信息
  statusText: "OK",

  // `headers` 服務(wù)器響應(yīng)的頭
  headers: {},

  // `config` 是為請(qǐng)求提供的配置信息
  config: {}
}

使用 then 時(shí)，會(huì)接收下面這樣的響應(yīng)：

axios.get("/user/12345")
  .then(function(response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

在使用 catch 時(shí)，或傳遞 rejection callback 作為 then 的第二個(gè)參數(shù)時(shí)，響應(yīng)可以通過(guò) error 對(duì)象可被使用。

配置的默認(rèn)值

你可以指定將被用在各個(gè)請(qǐng)求的配置默認(rèn)值。

全局的 axios 默認(rèn)值：

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

自定義實(shí)例默認(rèn)值：

// 創(chuàng)建實(shí)例時(shí)設(shè)置配置的默認(rèn)值
var instance = axios.create({
  baseURL: 'https://api.example.com'
});

// 在實(shí)例已創(chuàng)建后修改默認(rèn)值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

配置的優(yōu)先順序

配置會(huì)以一個(gè)優(yōu)先順序進(jìn)行合并。這個(gè)順序是：在 lib/defaults.js 找到的庫(kù)的默認(rèn)值，然后是實(shí)例的 defaults 屬性，最后是請(qǐng)求的 config 參數(shù)。后者將優(yōu)先于前者。這里是一個(gè)例子：

// 使用由庫(kù)提供的配置的默認(rèn)值來(lái)創(chuàng)建實(shí)例
// 此時(shí)超時(shí)配置的默認(rèn)值是 `0`
var instance = axios.create();

// 覆寫(xiě)庫(kù)的超時(shí)默認(rèn)值
// 現(xiàn)在，在超時(shí)前，所有請(qǐng)求都會(huì)等待 2.5 秒
instance.defaults.timeout = 2500;

// 為已知需要花費(fèi)很長(zhǎng)時(shí)間的請(qǐng)求覆寫(xiě)超時(shí)設(shè)置
instance.get('/longRequest', {
  timeout: 5000
});

攔截器

在請(qǐng)求或響應(yīng)被 then 或 catch 處理前攔截它們。

// 添加請(qǐng)求攔截器
axios.interceptors.request.use(function (config) {
    // 在發(fā)送請(qǐng)求之前做些什么
    return config;
  }, function (error) {
    // 對(duì)請(qǐng)求錯(cuò)誤做些什么
    return Promise.reject(error);
  });

// 添加響應(yīng)攔截器
axios.interceptors.response.use(function (response) {
    // 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么
    return response;
  }, function (error) {
    // 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么
    return Promise.reject(error);
  });

如果你想在稍后移除攔截器，可以這樣：

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

可以為自定義 axios 實(shí)例添加攔截器。

var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

錯(cuò)誤處理：

axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      // 請(qǐng)求已發(fā)出，但服務(wù)器響應(yīng)的狀態(tài)碼不在 2xx 范圍內(nèi)
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

可以使用 validateStatus 配置選項(xiàng)定義一個(gè)自定義 HTTP 狀態(tài)碼的錯(cuò)誤范圍。

axios.get('/user/12345', {
  validateStatus: function (status) {
    return status < 500; // 狀態(tài)碼在大于或等于500時(shí)才會(huì) reject
  }
})

取消

使用 cancel token 取消請(qǐng)求。

Axios 的 cancel token API 基于cancelable promises proposal

可以使用 CancelToken.source 工廠方法創(chuàng)建 cancel token，像這樣：

var CancelToken = axios.CancelToken;
var source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 處理錯(cuò)誤
  }
});

// 取消請(qǐng)求（message 參數(shù)是可選的）
source.cancel('Operation canceled by the user.');

還可以通過(guò)傳遞一個(gè) executor 函數(shù)到 CancelToken 的構(gòu)造函數(shù)來(lái)創(chuàng)建 cancel token：

var CancelToken = axios.CancelToken;
var cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函數(shù)接收一個(gè) cancel 函數(shù)作為參數(shù)
    cancel = c;
  })
});

// 取消請(qǐng)求
cancel();

注意：可以使用同一個(gè) cancel token 取消多個(gè)請(qǐng)求。

請(qǐng)求時(shí)使用 application/x-www-form-urlencoded

axios 會(huì)默認(rèn)序列化 JavaScript 對(duì)象為 JSON。如果想使用 application/x-www-form-urlencoded 格式，你可以使用下面的配置。

瀏覽器

在瀏覽器環(huán)境，你可以使用 URLSearchParams API：

const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

URLSearchParams 不是所有的瀏覽器均支持。

除此之外，你可以使用 qs 庫(kù)來(lái)編碼數(shù)據(jù):

const qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));

// Or in another way (ES6),

import qs from 'qs';
const data = { 'bar': 123 };
const options = {
  method: 'POST',
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  data: qs.stringify(data),
  url,
};
axios(options);

Node.js 環(huán)境

在 node.js里, 可以使用 querystring 模塊:

const querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({ foo: 'bar' }));

當(dāng)然，同瀏覽器一樣，你還可以使用 qs 庫(kù)。

Promises

axios 依賴(lài)原生的 ES6 Promise 實(shí)現(xiàn)而被支持。

如果你的環(huán)境不支持 ES6 Promise，你可以使用 polyfill。

TypeScript支持

axios 包含 TypeScript 的定義。

import axios from "axios";
axios.get("/user?ID=12345");

上一篇：Vue.js 混入下一篇：Vue.js Ajax(vue-resource)

中文字幕一区二区人妻电影,亚洲av无码一区二区乱子伦as ,亚洲精品无码永久在线观看,亚洲成aⅴ人片久青草影院按摩,亚洲黑人巨大videos

Vue.js Ajax(axios)

安裝方法

瀏覽器支持情況

GET 方法

GET 實(shí)例

GET 實(shí)例

傳遞參數(shù)說(shuō)明

POST 方法

POST 實(shí)例

傳遞參數(shù)說(shuō)明

執(zhí)行多個(gè)并發(fā)請(qǐng)求

實(shí)例

axios API

實(shí)例

請(qǐng)求方法的別名

并發(fā)

創(chuàng)建實(shí)例

實(shí)例方法

請(qǐng)求配置項(xiàng)

響應(yīng)結(jié)構(gòu)

配置的默認(rèn)值

配置的優(yōu)先順序

攔截器

取消

請(qǐng)求時(shí)使用 application/x-www-form-urlencoded

Node.js 環(huán)境

Promises

TypeScript支持