前端如何接接口

前端写接口

无名哈哈哈

6266人浏览 · 2022-07-28 16:58:39

无名哈哈哈 · 2022-07-28 16:58:39 发布

前端一般静态页面写完后，就要从后端获取数据了，就要进行接接口。接接口其实说白了就是发送网络请求，从后端获取数据，然后再将数据渲染到页面上。
今天就以一个简单的uniapp项目为例，介绍一下接口怎么写。
首先，是封装一个request.js文件（名字自取，就是一个封装请求的文件），封装是为了减少重复的请求代码。
这个是uniapp的封装（因为这个uniapp是做App的所以不用axios做，web一般是用axios封装）
其实request就是一个函数，它调用之后返回的是一个promise对象

// 同时发送多个请求的次数
let ajaxTimes = 0;
//h5端才存在跨域,App端没有跨域
let baseUrl ='  ' ; //这个地址是后端给的，可以从后端的接口文档看
// #ifdef H5
baseUrl = '/api/'; //这个重写是因为h5端会存在跨域（跨域是什么自行查询）
// #endif
export const request = (params) => {
  // 避免覆盖传递过来的header
  let header = {
    ...params.header
  } 
 //请求头要带token（为什么要带token自行查询）
  const token = uni.getStorageSync('token')
  if (token) {
    header['Authorization'] = 'Bearer '+token
  }
  ajaxTimes++;
  // 显示加载中 效果
  uni.showLoading({
    title: '加载中',
    mask: true
  });
  return new Promise((resolve, reject) => {
    uni.request({
      url: baseUrl + params.url,
      data: {
        ...params.data,
      },
      header: header,
      method: params.method,
      
      success: (response) => {
		//请求成功的处理
            },
      fail: (err) => {
       //请求失败的处理
      },
	   complete: () => {
       //请求完毕的处理
		    ajaxTimes--;
		   //请求处理完毕
		   if(ajaxTimes===0){
			   uni.hideLoading()
		   } 
	   }
    })
  })
}

然后也可以看看axios的封装

import axios from "axios";
import router from "../router";


const Host = ;
const baseURL = ;
let fullURL = Host + baseURL
const headerTokenKey = ''
//创建一个axios实例
export const request = axios.create({
    baseURL: fullURL,
    timeout: 10 * 1000,
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
    }
})
//请求拦截器，就是请求前做一些检查
request.interceptors.request.use(
    function (config) {
        if (!window.localStorage.getItem(headerTokenKey)) {
            console.log("没有token");
        } else {
            console.log(window.localStorage.getItem(headerTokenKey));
            config.headers[headerTokenKey] = window.localStorage.getItem(headerTokenKey);
        }
        return config;
    },
    function (error) {
        return Promise.reject(error);
    }
)
//响应拦截器，对响应结果做一些处理
request.interceptors.response.use(response => {
    console.log("response")
    console.log(response)
    console.log(response.data.code)
    if (response.data.code == 506) {
       console.log("没有操作权限");
        router.replace({
            path: '/login'
        })
        return response;
    } 
    else
     return response;
})

然后第二步，就是每个人都可以写自己负责的页面的接口了（每个接口就是copy一下，然后改一下函数名和参数就好了）

//刚才封装好的文件引入
import {request} from '@/api/request.js'

//导出这样的一个test函数就是一个接口
export function test(params){
    //可以看到这里的request函数调用了，所以它返回了一个promise
    //对象，所以调用test函数就会return一个promise对象，
	return request({
	  //传入的参数是对应后端给的接口的url,参数，还有请求方法
		url:'/ms/account/create',
		data:params,
	  method:'POST'
	})
}

写好一个接口后就到对应页面去应用了。
第三步，触发请求（触发请求的情况有很多啦，按钮点击啊，生命周期里啊，这个得看页面具体情况了）

template>
	<view>
    <text>请求篇</text>
	<button @click="send()">POST请求</button>
	</view>
</template>

<script>
//导入test接口，通过按钮点击事件触发请求
import {test} from '@/api/try.js'
export default{
	data(){
	  return {
	   listData: [],
	   data:'数据',
       params:{
        "message": "[{\"id\": \"序号1\",\"deviceName\": \"设备名称\",\"managerNumber\": \"管理编号\",\"brand\": \"品牌\",\"type\": \"型号\",\"factoryNumber\": \"出厂编号\",\"nominalAccuracy\": \"标称精度\",\"checkDate\": \"检定日期\",\"certificate\": \"证书编号\",\"ackCycle\": \"确认周期\",\"enpiryTime\": \"有效期至\",\"state\": \"仪器状态\",\"projectName\": \"所在项目\",\"keeper\": \"保管人\",\"note\": \"备注\"},{\"id\": \"序号2\",\"deviceName\": \"设备名称\",\"managerNumber\": \"管理编号\",\"brand\": \"品牌\",\"type\": \"型号\",\"factoryNumber\": \"出厂编号\",\"nominalAccuracy\": \"标称精度\",\"checkDate\": \"检定日期\",\"certificate\": \"证书编号\",\"ackCycle\": \"确认周期\",\"enpiryTime\": \"有效期至\",\"state\": \"仪器状态\",\"projectName\": \"所在项目\",\"keeper\": \"保管人\",\"note\": \"备注\"},{\"id\": \"序号31\",\"deviceName\": \"设备名称\",\"managerNumber\": \"管理编号\",\"brand\": \"品牌\",\"type\": \"型号\",\"factoryNumber\": \"出厂编号\",\"nominalAccuracy\": \"标称精度\",\"checkDate\": \"检定日期\",\"certificate\": \"证书编号\",\"ackCycle\": \"确认周期\",\"enpiryTime\": \"有效期至\",\"state\": \"仪器状态\",\"projectName\": \"所在项目\",\"keeper\": \"保管人\",\"note\": \"备注\"}]",
        "uploader": "张三",
        "accountTime": "2016-08-11",
        "accountName": "仪器设备台账",
         "accountYear": "2016"
              },
		
		  }
		},
	methods:{
		send(){	
		   //在点击事件里触发请求，上一步说了test调用后是一个promise对象，所以这里就通过then，catch处理请求情况
			test(this.params).then(res=>{
				console.log('成功')
				console.log(res)
			}).catch(err=>{
			     console.log('错误')
				console.log(err)
			})
			
		},
		}
}

第四步，然后我们可以在浏览器里请求情况，打开谷歌浏览器开发者工具的network查看请求情况。
下图是点击按钮后发送了请求，那里为什么是create因为接口url叫create，第二行200是请求状态码（200表示请求成功，40x，四零几一般就是前端这里的请求哪里写错了，自己检查一下，50x，五零几就是后端的问题）
在这里插入图片描述
如果network这里没有create这样的一条请求就是没发送出去，这个得自己去检查一下原因
点这条请求可以看到很多东西，

headers：这里可以看到请求头和响应头，我们也可以看到请求里里有Authorization: Bearer test1这一项，就是request.js那里封装的
Payload：是请求参数
Response：是后端的响应数据
在这里插入图片描述

再补充一下跨域问题前端常用的解决方法
就是在项目的根目录下，创建一个vue.config.js文件，写入以下内容

module.exports = {
	devServer:{
		port:'8080',//端口比如8080等等
		disableHostCheck:true,
		proxy:{
			'/api':{
				target:'',//后端给的地址
				changeOrigin:true,//确定跨域
				pathRewrite:{
					'^/api': ''//这个就是以在写请求的时候加上这个api,然后这里重写去掉api
				}
			}
		}
	}
}