Vue.js(七) http (vue-resource和axios)

Promise

风流少年

10469人浏览 · 2019-01-03 16:50:58

风流少年 · 2019-01-03 16:50:58 发布

一：vue-resource

1.1 vue-resource简介

vue-resource是Vue的一个http插件，功能类似于ajax。

可以通过使用全局Vue.http或者Vue实例this.$http来引用http服务。

官网地址：https://github.com/vuejs/vue-resource

1.2 安装vue-resource

在package.json中引入vue-resource，然后使用npm install安装

"dependencies": {
    "vue": "^2.5.2",
    "vue-resource": "^1.5.1"
}

npm install
// 或者
cnpm install

在src/main.js中使用插件

import VueResource from 'vue-resource'
Vue.use(VueResource)

1.3 请求方式

常用的有get、post、put、delete，每个函数的返回值都是Promise对象，异步API请求成功后会调用then()方法

// 获取资源
Promise get(url, [options])
// 创建资源
Promise post(url, [body], [options])
// 修改资源
Promise put(url, [body], [options])
// 删除资源
Promise delete(url, [options])

Promise head(url, [options])
Promise jsonp(url, [options])
Promise patch(url, [body], [options])

// 全局Vue对象
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

// Vue实例
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

使用示例

this.$http.get('/someUrl').then((response) => {
  // success callback
}, (response) => {
  // error callback
});

请求

参数	类型	描述
url	`string`	请求发送到的 URL
body	`Object`, `FormData`, `string`	请求中要发送的数据
headers	`Object`	作为 HTTP 请求头发送的 Headers 对象
params	`Object`	作为 URL 参数发送的 Parameters 对象
method	`string`	HTTP 方法 (例如： GET, POST, ...)
timeout	`number`	请求超时的毫秒数 (`0` 为不超时)
before	`function(request)`	在请求发送之前用于修改请求选项的回调函数
progress	`function(event)`	上传时用于控制 ProgressEvent 的回调函数
credentials	`boolean`	Indicates whether or not cross-site Access-Control requests should be made using credentials
emulateHTTP	`boolean`	如果Web服务器无法处理PUT, PATCH和DELETE这种REST风格的请求，你可以启用enulateHTTP现象。启用该选项后，请求会以普通的POST方法发出，并且HTTP头信息的X-HTTP-Method-Override属性会设置为实际的HTTP方法。 Vue.http.options.emulateHTTP = true;
emulateJSON	`boolean`	如果Web服务器无法处理编码为application/json的请求，你可以启用emulateJSON选项。启用该选项后，请求会以application/x-www-form-urlencoded作为MIME type，就像普通的HTML表单一样。 Vue.http.options.emulateJSON = true;

响应

属性	类型	描述
url	`string`	响应的源 URL
body	`Object`, `Blob`, `string`	响应的数据报文
headers	`Header`	响应头对象
ok	`boolean`	从 200 到 299 的 HTTP 状态码
status	`number`	响应中的 HTTP 状态码
statusText	`string`	响应中的 HTTP 状态文本
函数	类型	描述
text()	`Promise`	作为字符串解析报文
json()	`Promise`	作为 Json 对象解析报文
blob()	`Promise`	作为 Blob 对象解析报文

1.4 简单示例

App.vue

<template>
  <div id="app">
    {{ res }}
  </div>
</template>

<script>
  export default {
    name: 'App',
    data () {
      return {
        res: {}
      }
    },
    created () {
      this.$http.post('http://127.0.0.1:9000/api/user/login',
        {username: 'mengday', password: '123456'},
        {emulateJSON:true})
        .then((response) => {
          let body = response.body
          this.res = body
        }, (error) => {
          console.log(error)
        })
        .catch(error => {
          console.log('在整个请求到响应过程中，只要程序出错了就会被调用。')
        }
      )
    }
  }
</script>

catch方法用于捕捉程序的异常，catch方法和errorCallback是不同的，errorCallback只在响应失败时调用，而catch则是在整个请求到响应过程中，只要程序出错了就会被调用。

interceptors：拦截器用于拦截请求，可以在请求发送前做一些操作(如对数据进行签名、显示加载中、修改请求方式、修改请求参数等)，也可以在请求响应后做一些处理(如验证请求报文等，验证接口的错误码等)。

src/main.js

// 全局请求拦截器
Vue.http.interceptors.push((request, next) => {
  console.log('前置拦截：在请求前拦截, 例如修改请求, 显示loading')
  console.log(request.body)
  request.headers.set('AccessToken', 'token')
  next((response) => {
    console.log('后置拦截：在请求响应后拦截, 例如验签等')
    console.log(response.body)
  })
})

注意：在接口调用时会出现跨域问题，可以放在后端解决，也可以使用jsonp()来解决。

@Configuration
@EnableWebMvc
public class WebMvcConfiguration extends WebMvcConfigurerAdapter {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowCredentials(false).maxAge(3600);
    }
}

SampleController

@RestController
@RequestMapping("/api/user")
public class SampleController {

    @PostMapping(value = "/login", produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
    public String login(@RequestParam("username") String username,
                        @RequestParam("password") String password,
                        @RequestHeader("AccessToken") String token) {
        String result = "{" +
                "\"code\": 0," +
                "\"msg\": \"SUCCESS\"," +
                "\"data\": {" +
                "\"username\": \"" + username + "\"," +
                "\"token\":\"" + UUID.randomUUID() + "\"" +
                "}" +
                "}";

        return result;
    }
}

在这里插入图片描述

二：axios

2.1 简介

vue2.0之后，就不再对vue-resource更新，而是推荐使用axios。基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 Node.js 中使用。

// 安装axios  
// --save 是将插件名称和版本号添加到package.json中的dependencies中
cnpm install --save axios

在src/main.js中引入axios

import axios from 'axios'

2.2 api

Promise axios.request（config）
Promise axios.get（url [，config]）
Promise axios.post（url [，data [，config]]）
Promise axios.put（url [，data [，config]]）
Promise axios.delete（url [，config]）
Promise axios.head（url [，config]）
Promise axios.patch（url [，data [，config]]）

// 构造函数：根据配置选项创建一个Axios实例对象
AxiosInstance axios.create([config])

config

{
	// `url`是将用于请求的服务器URL
	url: '/user',
	
	// `baseURL`将被添加到`url`前面，除非`url`是绝对的。
	// 可以方便地为 axios 的实例设置`baseURL`，以便将相对 URL 传递给该实例的方法。
	baseURL: 'https://some-domain.com/api/',
	
	// `method`是发出请求时使用的请求方法
	method: 'get', // 默认
	
	// “responseType”表示服务器将响应的数据类型
	responseType: 'json', // default
	
	// `headers`是要发送的自定义 headers
	headers: {'Content-Type': 'application/json'},
	
	// `params`是要与请求一起发送的URL参数
	// 必须是纯对象或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
	// - Browser only: FormData, File, Blob
	// - Node only: Stream
	data: {
	  firstName: 'Fred'
	},
	
	// `timeout`指定请求超时之前的毫秒数。
	// 如果请求的时间超过'timeout'，请求将被中止。
	timeout: 1000,
	
	// `transformRequest`允许在请求数据发送到服务器之前对其进行更改
	// 这只适用于请求方法'PUT'，'POST'和'PATCH'
	// 数组中的最后一个函数必须返回一个字符串，一个 ArrayBuffer或一个 Stream
	transformRequest: [function (data) {
	  // 做任何你想要的数据转换
	
	  return data;
	}],
	
	// `transformResponse`允许在 then / catch之前对响应数据进行更改
	transformResponse: function (data) {
	// Do whatever you want to transform the data
	
	  return data;
	}],
	
	
	// `withCredentials`指示是否跨站点访问控制请求
	// should be made using credentials
	withCredentials: false, // default
	
	// `adapter'允许自定义处理请求，这使得测试更容易。
	// 返回一个promise并提供一个有效的响应（参见[response docs]（＃response-api））
	adapter: function (config) {
	
	},
	
	// `auth'表示应该使用 HTTP 基本认证，并提供凭据。
	// 这将设置一个`Authorization'头，覆盖任何现有的`Authorization'自定义头，使用`headers`设置。
	auth: {
	  username: 'xxx',
	  password: 'xxx'
	},
	
	//`xsrfCookieName`是要用作 xsrf 令牌的值的cookie的名称
	xsrfCookieName: 'XSRF-TOKEN', // default
	
	// `xsrfHeaderName`是携带xsrf令牌值的http头的名称
	xsrfHeaderName: 'X-XSRF-TOKEN', // default
	
	// `onUploadProgress`允许处理上传的进度事件
	onUploadProgress: function (progressEvent) {
	// 使用本地 progress 事件做任何你想要做的
	},
	
	// `onDownloadProgress`允许处理下载的进度事件
	onDownloadProgress: function (progressEvent) {
	// Do whatever you want with the native progress event
	},
	
	// `maxContentLength`定义允许的http响应内容的最大大小
	maxContentLength: 2000,
	
	// `validateStatus`定义是否解析或拒绝给定的promise
	// HTTP响应状态码。如果`validateStatus`返回`true`（或被设置为`null` promise将被解析;否则，promise将被
	  // 拒绝。
	validateStatus: function (status) {
		return status >= 200 && status < 300; // default
	},
	
	// `maxRedirects`定义在node.js中要遵循的重定向的最大数量。
	// 如果设置为0，则不会遵循重定向。
	maxRedirects: 5, // 默认
	
	// `httpAgent`和`httpsAgent`用于定义在node.js中分别执行http和https请求时使用的自定义代理。
	// 允许配置类似`keepAlive`的选项，
	// 默认情况下不启用。
	httpAgent: new http.Agent({ keepAlive: true }),
	httpsAgent: new https.Agent({ keepAlive: true }),
	
	// 'proxy'定义代理服务器的主机名和端口
	// `auth`表示HTTP Basic auth应该用于连接到代理，并提供credentials。
	// 这将设置一个`Proxy-Authorization` header，覆盖任何使用`headers`设置的现有的`Proxy-Authorization` 自定义 headers。
	proxy: {
	  host: '127.0.0.1',
	  port: 9000,
	  auth: : {
	  	username: 'xxx',
	    password: 'xxxx'
	  }
	},
	
	// “cancelToken”指定可用于取消请求的取消令牌
	// (see Cancellation section below for details)
	cancelToken: new CancelToken(function (cancel) {
	
	})
}

2.3 请求示例

// 自定义Axios实例
var instance = axios.create({
  method: 'POST',
  baseURL: 'https://api.example.com'
})
instance.defaults.headers.common ['Content-Type'] = 'application/x-www-form-urlencoded';
Vue.prototype.$http = instance

// axios(url[, config])
axios({
	method: 'post',
	url: '/user/12345',
	data: {
		firstName: 'Fred',
		lastName: 'Flintstone'
	}
});

2.4 简单示例

src/main.js

import axios from 'axios'

// 给Vue实例添加一个是个属性，这样在每个实例中就可以使用this.$http来访问axios实例了
Vue.prototype.$http = axios

// 一些默认的参数
axios.defaults.baseURL = 'http://127.0.0.1:9000/api'

// 请求拦截器：在发送请求前拦截
axios.interceptors.request.use(config => {
  console.log('请求发送前拦截')
  config.headers.common['AccessToken'] = 'token'
  return config;
}, error => {
  return Promise.reject(error)
})

// 响应拦截器：在请求响应之后拦截
axios.interceptors.response.use(response => {
  console.log('请求响应后处理')
  return response;
}, error => {
  return Promise.reject(error)
})

App.vue

<template>
  <div id="app">
    {{ res }}
  </div>
</template>

<script>
  export default {
    name: 'App',
    data () {
      return {
        res: {}
      }
    },
    created () {
      this.$http.post('/user/login',
        {username: "mengday", password: "123456"})
        .then(response => {
          console.log(response)
          if (response.data.code === 0) {
            this.res = response.data.data
          }
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
</script>

SampleController

@RestController
@RequestMapping("/api/user")
public class SampleController {

    @PostMapping(value = "/login", produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
    public String login(@RequestBody User user) {
        String result = "{" +
                "\"code\": 0," +
                "\"msg\": \"SUCCESS\"," +
                "\"data\": {" +
                "\"username\": \"" + user.getUsername() + "\"," +
                "\"token\":\"" + UUID.randomUUID() + "\"" +
                "}" +
                "}";

        return result;
    }
}

三：mockjs

开发中前端开发和后端开发一般是同时开发的，不可能前端开发等后端接口开发好后再开发，只需要后端API给出接口定义即可，然后前端就可以模拟后台API进行开发。

mockjs官网：https://github.com/nuysoft/Mock/wiki

3.1 安装mockjs

cnpm install --save mockjs

3.2 src/mock/index.js

import Mock from 'mockjs'
import { Random } from 'mockjs'

// 全局设置
Mock.setup({
  timeout: 1000
})

function success(data) {
  return {
    code: 0,
    msg: 'SUCCESS',
    data: data
  }
}

function error(code, msg) {
  return {
    code: code,
    msg: msg
  }
}

//模拟后台返回的数据
let users = () => {
  let data = {
    guid: Random.guid(),
    string: Random.string(10),
    number: Random.string('number', 8, 10),
    date: Random.date('yyyy-MM-dd'),
    time: Random.time('A HH:mm:ss'),
    county: Random.county(),
    cword: Random.cword(4, 16), // 随机生成任意名称
    cname: Random.cname(),
    csentence: Random.csentence(10, 32)
  }

  return success(data)
}

// 路径和方法绑定
// rtype表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等
Mock.mock('/users', /GET|POST|PUT|DELETE/i, users)

3.3 src/main.js

import './mock/index.js'

// 注意mock时不支持baseURL
// axios.defaults.baseURL = 'http://127.0.0.1:9000/api'

3.4 App.vue

this.$http
	.post('/users')
    .then(response => {
      console.log(response)
      if (response.data.code === 0) {
        this.res = response.data.data
      }
    })
    .catch(error => {
      console.log(error)
    })

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^