Once the interface is written, you want to test its correctness. The fastest way to do this is postman, out of code. Of course, the front end can also form submission or use Axios. The point here is that when an interface comes out, the three test methods are quite different depending on its content-Type.

Tell me about the content-type first

Request headers and response headers always have content-Types, just like the translation content type, which represents the content type in the body in the request and the content type in the return body in the response.

There is no body in the get request. The parameter is concatenated after the interface address, so there is no Content-Type in the GET request.

If a post request has a body, the interface must have a content-Type value, and the front end must set the request header to the corresponding value so that the interface gets the correct data. Different content-Types can be handled differently by the front end and the back end. Of course, if the backend is compatible with these methods, then the testing is more arbitrary ~~

There are many types of content-type, but there are three types of content-type:

  • application/json, the body format passed by the front end is{"a":1,"b":2}
  • application/x-www-form-urlencoded, the body format passed by the front end isa=1&b=2
  • multipart/form-dataIn this case, the body format passed by the front end is as follows, which is used for each form item--[boundary]Break it up and use the last line--[boundary]--The end, the corresponding one down here{name:'huahua',file: file flow,}
------WebKitFormBoundary6VWyGefevm60vjtn
Content-Disposition: form-data; name="name"

huahua
------WebKitFormBoundary6VWyGefevm60vjtn
Content-Disposition: form-data; name="file"; filename="study.md"
Content-Type: text/markdown

------WebKitFormBoundary6VWyGefevm60vjtn--
Copy the code

application/json

If the content-type specified by the interface is Application/JSON

  • In the codeaxios.post('/api/user',{a:1,b:2})Axios will automatically change the object into a JSON object and then send it, and the Content-Type will automatically change because the second argument is an objectapplication/json, no additional Settings required. If you are using another library, see if you need to set the request header based on the libraryContent-Type = application/json
  • Postman, when used, looks like this:

    Here, Postman will also choose because of youJSON, while automatically settingContent-Type = application/json

Use (bodyParser.json()) let {a,b} = req.body

application/x-www-form-urlencoded

When the interface specifies that the content-Type required is Application/X-www-form-urlencoded

  • In the codeaxios.post('/api/user',Qs.stringify({a:1,b:2}))Stringify will change it toa=1&b=2Content-type is automatically changed because the second argument is a stringapplication/application/x-www-form-urlencoded, no additional Settings required. If you are using another library, see if you need to set the request header based on the libraryContent-Type = application/x-www-form-urlencodedAxios can also handle transformRequest without going into details
  • Form elements can also be submitted automatically in the code<form method="post" action="/api/user"><input type="text" name="a"><input type="text" name="b"><button Type = "submit" > submit < / button > < / form >There is no need to set encType because the default is encTypeapplication/application/x-www-form-urlencoded
  • Postman, when used, looks like this:

    Here, Postman will also choose because of youx-www-form-urlencoded, while automatically settingContent-Type = application/x-www-form-urlencoded

Use (bodyParser. Urlencoded ({extended: false})) then let {a,b} = req. Body.

multipart/form-data

If the content-Type required by the interface is multipart or form-data, there are two cases: No file is uploaded or a file is uploaded

When no files are uploaded

  • In the codelet formData = new FormData(); formData.append('a',1); formData.append('b',2); axios.post('/api/user',formData)Axios will automatically change it to a bounding form, and content-Type will automatically change it to a bounding form because the second argument is formDataapplication/multipart/form-data, no additional Settings required. If you are using another library, see if you need to set the request header based on the libraryContent-Type = multipart/form-dataAxios can also handle transformRequest without going into details
  • Form elements can also be submitted automatically in the code<form method="post" action="/api/user" enctype="multipart/form-data"><input type="text" name="a"><input type="text" Name ="b"><button type="submit">Enctype must be set here
  • Postman, when used, looks like this:

    Here, Postman will also choose because of youmultipart/form-data, while automatically settingContent-Type = application/multipart/form-data

Let upload = multer(); app.post(‘/formdata’, upload.none(), (req, res)=> { let {a,b} = req.body; . }), no file plus upload.none()

There is a time to upload files

  • In the codelet formData = new FormData(); formData.append('a',1); formData.append('avatar',xx.files[0]); axios.post('/api/user',formData)Axios will automatically change it to a bounding form, and content-Type will automatically change it to a bounding form because the second argument is formDataapplication/multipart/form-data, no additional Settings required. If you are using another library, see if you need to set the request header based on the libraryContent-Type = multipart/form-dataAxios can also handle transformRequest without going into details
  • Form elements can also be submitted automatically in the code<form method="post" action="/api/user" enctype="multipart/form-data"><input type="text" name="a"><input type="file" Name ="avatar"><button type="submit"> </button>Enctype must be set here
  • Postman, when used, looks like this:

    Here, Postman will also choose because of youmultipart/form-data, while automatically settingContent-Type = application/multipart/form-data

Upload = multer({dest: ‘uploads/’}); app.post(‘/formdata’, upload.single(‘avatar’), (req, res)=> { let file= req.avatar; let {a,b} = req.body; . }), the file temporarily exists uploads/, the specific usage of multer

reference

  • Parse multipart/form-data in depth
  • Parser multipart/form-data parser