聊一聊前端中常说的接口

文章目录

    • 聊一聊前端中常说的接口
      • 1. 接口是前端提供的还是后端提供的
      • 2. 什么是接口
      • 3. 总结

聊一聊前端中常说的接口

平时总是听到前端中的接口这样的词,接下来简单说一下我对前端接口一些浅见。

1. 接口是前端提供的还是后端提供的

接口是后端提供的,前端负责调用这个接口。

后端提供接口,比如你登录,就把登录的账号,密码发送到后端,后端的程序拿到前端提交的用户名和密码后,拿去和数据库里面的值做比对,并把结果返回给你。

2. 什么是接口

下面的代码发起了一个 Ajax 请求,请求的 url/api/headerList.json,请求类型是 GET,请求的文件是一个 json 文件。

这个 json 文件就是后端提供的一个接口,前端可以通过发起一个请求并获得里面的内容。

export const getList = () => {
  return (dispatch) => {
    axios.get('/api/headerList.json').then((res) => {
	  const data = res.data;
      const action = {  // 新建一个action
        type: 'change_list',
        data: data.data;  
      };
      dispatch(action); // 将新创建的action传给store
    }).catch(() => {
      console.log('error');
    })
  }
};

在真正的开发过程中,当前端需要服务器上的某个文件(数据)时,这个时候就需要和开发后端的小伙伴进行沟通了,我需要从哪里取数据呢?经过一番商量之后,咱们就约定在api文件夹下的headerList.json文件吧。

我(前端)在开发的时候就将 headerList.json 文件放到 api 目录下,你(后端)在开发的时候将处理后的 headerList.json 文件也放到 api 目录下。

愉快地开发完之后,到了上线的时间了,这时候前端把前端项目下的 api 目录删掉,使用后端提供的 api 目录下的 headerList.json 文件就可以了。

3. 总结

  1. 接口其实就是一个 url,一般对应服务器上的某个文件,对这个 url 发起请求,经过后端的一些处理后会返回一些数据(格式一般为 json)。
  2. 接口由后端提供,前端调用后端接口以获取后端数据。


如有不恰当之处,欢迎指正。

你可能感兴趣的:(前端基础,前端,接口)