Restful 风格接口【了解】-EW帮帮网

文章目录

Restful 风格接口【了解】

Restful 风格的 API 是一种软件架构风格，设计风格而不是标准，只是提供了一组设计原则和约束条件。它主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简结，更有层次，更易于实现缓存等机制。

在 Restful 风格中，用户请求的 Url 使用同一个 url 而用请求方式： get, post, delete, put …等方式对请求的处理方法进行区分，这样可以在前后台分离式的开发中使得前端开发人员不会对请求的资源地址产生混淆和大量的检查方法名的麻烦，形成一个统一的接口。

Axios 与 QS 【熟悉】

在 Vue 和 React 等大型项目中，我们常用的数据请方式，就是 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

官网地址： http://www.axios-js.com/

一、安装

-S 是安装在 dependencies 跟随项目安装在服务器
-D  是安装在 devDependencies

npm i axios qs -S
//OR
yarn add axios qs

二、使用

***axios 统一使用格式

axios.get(url[, config])
axios.post(url[, data[, config]])

//直白一点表示：
axios
	.get(url, {
		params: {}
	})
		.then(res=>{})
		.catch(err=>{})

axios
	.post('/user', {})
	.then(res=>{})
	.catch(err=>{})

三、创建实例【熟悉】

axios.create([config])

一般我们会通过创建实例，来统一对所有的请求进行配置：

import  axios from 'axios'

const instance = axios.create({
	baseURL: 'https://some-domain.com/api/',     //这里baseURL不是驼峰URL必须大写
    timeout: 1000,
    headers: {
    	'X-Custom-Header': 'foobar',
    	common["LAuthorization"]: AUTH_T0KEN,
    	post['Content-Type']: 'application/x-www-form-urlencoded'
    }
})

四、拦截器【熟悉】

在请求或响应被 then 或 catch 处理前拦截它们。

//添加请求拦截器
instance.interceptors.request.use(
    function (config) {
        //在发送请求之前做些什么
        return config
    },
    function (error) {
        //对请求错误做些什么
        return Promise.reject(error)
    }
)

//添加响应拦截器
instance.interceptors.response.use(
    function (response) {
        //对应响数据做点什么
        return response
    },
    function (error) {
        //对响应错误做点
        return Promise.reject(error)
    }
)

五、API 按需导出并在组件中使用【熟悉】

import request from './request'
export const GetDataAPI = () => request.get('/getdata')
expoet const PostDataAPI = (data) => request.post('/postdata')

使用：

import { GetDataAPI, PostDataAPI } from '@/request/api'

GetDataAPI().then((res) => {
    console.log(res)
})

let qsObj = qs.stringify({
    num: 123,
})
PostDataAPI({ data: qsObj }).then((res) => {
    console.log(res)
})

*qs

qs 能将 json 格式转为 key = value 的格式。

具体用法：

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

*qs.stringify 与 JSON.stringify 的区别

qs.stringify() 将对象序列化成 URL 的形式，以&进行拼接。 JSON.stringify() 是正常类型的 JSON

var a = { name: 'Lucy', age: 10 }
qs.stringify(a)
//'name=Lucy&age=10'
JSON.stringify(a)
//'{"name": "Lucy", "age": 10}'

*实际操作

1、开启后端服务

打开 backend 目录，执行 npm i 命令，安装依赖成功后再执行 node server.js，到浏览器输入 http://localhost:8000 查看接口文档。

2、组件中发起请求：

发送 get 请求：

//get请求
axios.get('http://localhost:8000/getdata').then((res) => {
    console.log(res)
})

//上面的请求也可以这样做【以后我们都选用这种模式，方便后期做配置】
let qsObj = qs.stringify({
    num: 123,
})
axios
    .post('http://localhost:8000/postdata', {
        data: qsObj,
    })
    .then((res) => {
        console.log(res)
    })

3、解决跨域

到此，发现跨域，解决方案是找到 vue.config.js:

module.exports = {
    deServer: {
        proxy: 'http://localhost:8000',
    },
}

然后请求改写：

//get 请求
axios.get('/getdata').then((res) => {
    console.log(res)
})

//上面的请求也可以这样做【以后我们都选用这种模式，方便后期做配置】
let qsObj = qs.stringify({
    num: 123,
})
axios
    .post('/postdata', {
        data: qsObj,
    })
    .then((res) => {
        console.log(res)
    })

ok,到此为止，我们解决了跨域，并请求成功！

在项目中使用 axios

怎么做封装或做 request 的封装

引入的一个 axios, 创建一个单例，做了二层拦截，一层请求拦截(做配置），一层响应拦截(返回数据）。导出单例

在 api.js 引入单例，1、去 api 哪里按需导出
// 2、在组件中按需导入
// 3、发送请求

本文含有隐藏内容，请开通VIP 后查看

Restful 风格接口【了解】

文章目录