vue axios

vue的做者在vue2.0發佈以後宣告---中止對vue-resource的更新,推薦使用axios

前段時間用了用,如今說說其基本用法.

一.準備階段 ----若是你只是個前端不會寫接口或者大家要先後分離的話,你須要知道mock

這裏交個你一個超級簡單的方式

1.建立一個mock文件夾

2.建立tree.json而後隨便寫點數據上去

3.修改dev-server裏面的配置---記住修改這裏的時候在你運行npm run build 的時候不會被build 因此須要你和後端人員協商好路徑問題 避免 404

目錄:bulid/dev-server

 

 二 . 安裝

//安裝
npm install axios

 

 三. 使用

在src/components文件夾下建立 RainAxios.vue

<template>
  <div>
    <div>msg: {{msg}}</div>
    <button @click='fn("../123")'>點擊</button>
    <!--<audio autoplay="autoplay" src="audio/index.mp3"/>-->
  </div>
</template>
<style scoped>

</style>
<script>
  import Axios from 'axios'
  export default{
    data(){
      return {
        msg: 'hello Axios',
      }
    },
    components: {},
    methods: {
      fn: function () {
        var _this = this;
        Axios.get("./mock/tree.json")
          .then(function (rsp) {
            _this.msg = rsp.data.name
          })
      }
    }
  }
</script>

這個組件的需求很簡單 ,  點擊發送axios請求tree.json 並將返回值賦給msg 

 src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Axios1 from '@/components/RainAxios'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Axios',
      component: Axios1
    }
  ]
})

不用我結識了吧  ----這是我最後一次寫如此詳細的教程了 

之後只要是vue的東西都須要想一想是否須要改router裏面的東西

 點擊後值改變

若是你完成了上述功能 ---- 如今正式談談axios的用法了哦!!

axios提供瞭如下方法

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」是用於請求的服務器URL
  url: '/user',
 
  // 是在請求時使用的請求方法
  method: 'get', // 默認
 
  // baseURL  
  baseURL: 'https://some-domain.com/api/',
 
  // ` transformrequest ` 容許修改請求的數據後再發送到服務器
  transformRequest: [function (data) {
    // 作一些你想作的數據的改變
 
    return data;
  }],
 
  // `transformResponse` allows changes to the response data to be made before 
  // it is passed to then/catch 
  transformResponse: [function (data) {
    // Do whatever you want to transform the data 
 
    return data;
  }],
 
  // `headers` are custom headers to be sent 
  headers: {'X-Requested-With': 'XMLHttpRequest'},
 
  // `params` are the URL parameters to be sent with the request 
  // Must be a plain object or a URLSearchParams object 
  params: {
    ID: 12345
  },
 
  // `paramsSerializer` is an optional function in charge of serializing `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` is the data to be sent as the request body 
  // Only applicable for request methods 'PUT', 'POST', and 'PATCH' 
  // When no `transformRequest` is set, must be of one of the following types: 
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams 
  // - Browser only: FormData, File, Blob 
  // - Node only: Stream 
  data: {
    firstName: 'Fred'
  },
 
  // `timeout` specifies the number of milliseconds before the request times out. 
  // If the request takes longer than `timeout`, the request will be aborted. 
  timeout: 1000,
 
  // `withCredentials` indicates whether or not cross-site Access-Control requests 
  // should be made using credentials 
  withCredentials: false, // default 
 
  // `adapter` allows custom handling of requests which makes testing easier. 
  // Return a promise and supply a valid response (see [response docs](#response-api)). 
  adapter: function (config) {
    /* ... */
  },
 
  // `auth` indicates that HTTP Basic auth should be used, and supplies credentials. 
  // This will set an `Authorization` header, overwriting any existing 
  // `Authorization` custom headers you have set using `headers`. 
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },
 
  // `responseType` indicates the type of data that the server will respond with 
  // options are 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream' 
  responseType: 'json', // default 
 
  // `xsrfCookieName` is the name of the cookie to use as a value for xsrf token 
  xsrfCookieName: 'XSRF-TOKEN', // default 
 
  // `xsrfHeaderName` is the name of the http header that carries the xsrf token value 
  xsrfHeaderName: 'X-XSRF-TOKEN', // default 
 
  // `onUploadProgress` allows handling of progress events for uploads 
  onUploadProgress: function (progressEvent) {
    // Do whatever you want with the native progress event 
  },
 
  // `onDownloadProgress` allows handling of progress events for downloads 
  onDownloadProgress: function (progressEvent) {
    // Do whatever you want with the native progress event 
  },
 
  // `maxContentLength` defines the max size of the http response content allowed 
  maxContentLength: 2000,
 
  // `validateStatus` defines whether to resolve or reject the promise for a given 
  // HTTP response status code. If `validateStatus` returns `true` (or is set to `null` 
  // or `undefined`), the promise will be resolved; otherwise, the promise will be 
  // rejected. 
  validateStatus: function (status) {
    return status >= 200 && status < 300; // default 
  },
 
  // `maxRedirects` defines the maximum number of redirects to follow in node.js. 
  // If set to 0, no redirects will be followed. 
  maxRedirects: 5, // default 
 
  // `httpAgent` and `httpsAgent` define a custom agent to be used when performing http 
  // and https requests, respectively, in node.js. This allows to configure options like 
  // `keepAlive` that are not enabled by default. 
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),
 
  // 'proxy' defines the hostname and port of the proxy server 
  // `auth` indicates that HTTP Basic auth should be used to connect to the proxy, and supplies credentials. 
  // This will set an `Proxy-Authorization` header, overwriting any existing `Proxy-Authorization` custom headers you have set using `headers`. 
  proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: : {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },
 
  // `cancelToken` specifies a cancel token that can be used to cancel the request 
  // (see Cancellation section below for details) 
  cancelToken: new CancelToken(function (cancel) {
  })
}

感受沒啥區別 玩不轉的能夠繼續 jquery--$.ajax

 我的感受npm中的教程不錯  不過沒有配合 vue-cli+webpack使用

我的以爲使用vue使用express靜態服務器有點low   而後來看看 如何使用json-server http://www.cnblogs.com/web-Rain/p/6520238.html